移動開發的小積累

時間 2019-11-24

標籤移動開發積累欄目無線简体版

原文原文鏈接

在webkit內的觸摸事件主要有如下幾個：
touchstart---->觸摸開始
touchmove----->接觸點改變
touchend------>觸摸結束
touchcancel--->觸摸取消javascript

下面我主要針對我平常用的比較多的touchstart,touchend兩個事件進行封裝，使得其像jQuery類庫同樣方便使用。css

代碼以下：html

首先是touchEvent.js文件java

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="touchEvent.js"></script>
</head>
<body>
<input type="button" class="button" value="button" />
<script type="text/javascript">
$('.button').on('tap', function(e) {
e.preventDefault();
alert('tap');
}).on('tapend', function(e) {
alert('tapend');
});
</script>
</body>
</html>web

一個比較突出的是iphone上submit按鈕的默認風格，與咱們設計師設計出來的不同，這下設計師不高興了。so爲了搏妹子一笑，咱去找google先生。解決結果以下移動web開發

.subtn{
   -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none
}

原來瀏覽器還有appearance這個屬性，這個屬性還至關的強大，只不過每一個瀏覽器的默認風格差別很大。瀏覽器

下面這個狀況作過移動web開發的都差很少遇到過，就是當你點擊一個連接或者經過Javascript定義的可點擊元素的時候，它就會出現一個半透明的灰色背景。可是，大部分狀況下我是不須要這個高亮。解決方案：app

.nav_a{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

　　這個關鍵在最後一個值0，意思是把顏色的alpha值爲0。iphone

作網站固然就少不了使用icons。如今國外如今很流行把圖標轉換成web字體，國內部分網站也有用，雖然這有它的優點；但這些也有不足之處，好比圖標必須是純色之類的。我這裏主要說的是用圖片作icon的時候，圖片變得很虛。有問題，就有解決的方法：

.m_okhqb_header .dib {
	width:35px;
	height:30px;
	background:url(http://s2.hqbcdn.com/mobile/v0/images/icons/sp_icos_2.png) no-repeat 0 2px;
　　　　 background-size:50px auto;
}

上面的css重點在於sp_icos_2.png要比實際圖片大一倍，再經過background-size去設置成其大小的一半，不過至因而不是必定要設置成其一半的大小，你們能夠試試。

下面介紹三個相關佈局的css屬性，至關實用。

box-sizing 屬性

box-sizing 屬性容許您以特定的方式定義匹配某個區域的特定元素。
box-sizing有三個屬性值content-box，border-box，inherit。這裏我重點說下border-box。

當box-sizing的屬性值爲border-box時，表示經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。看下面的css代碼：

.box {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
	width:200px;
        height:100px;
	float:left;
	padding:50px 50px 0;	
}

　　這段css表示類爲box的元素的總的寬度爲200px，左右內邊距爲100px，而這個元素的內容寬度問100px。不知道這樣你們可否理解，不理解的話能夠本身親自試試。再不懂可點《CSS3 box-sizing 屬性》瞭解更多。可能你們會問這個到底有什麼做用，它在移動站的響應式佈局時，時常不知曉寬度的時候是很是有做用。

box-flex 屬性

box-flex 屬性規定框的子元素是否可伸縮其尺寸。（可伸縮元素可以隨着框的縮小或擴大而縮寫或放大。只要框中有多餘的空間，可伸縮元素就會擴展來填充這些空間。）

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title> 

box-flex </title>
	<style type="text/css">
		* {margn:0; padding:0;}
		.box {
			background:blue;
			width:600px;
			height:100px;
			display:-webkit-box;			
			display:-moz-box;			
			display:box;			
		}
		.box .p1 {
			-webkit-box-flex:1.0;
			-moz-box-flex:1.0;
			box-flex:1.0;
			background:yellow;
		}
		.box .p2 {
			-webkit-box-flex:2.0;
			-moz-box-flex:2.0;
			box-flex:2.0;
			background:green;
		}
	</style>
</head>
<body>
	<div class="box">
		<p class="p1">p1</p>
		<p class="p2">p2</p>
	</div>
</body>
</html>

　　在使用這個css屬性的時候，必定要在其父元素上(這裏就是.box)設置display:box;固然如今瀏覽器還不支持這個屬性，全部必須帶上私有前綴（-webkit，-moz...）。這個屬性如今移動端也是很是好用的，特別是佈局是平分的時候。

display:table 與 display:table-cell

第一個表示的是：此元素會做爲塊級表格來顯示（相似 <table>），表格先後帶有換行符。

第二個表示的是：此元素會做爲一個表格單元格顯示（相似 <td> 和 <th>）

這兩個結合起來用，能夠元素類是表格的佈局。在移動端上這兩個應該使用的頻率也是蠻高。