移動端技巧

一. 基本技巧
1. 作移動端,使用百分比
2. CSS3提供的彈性盒子 display:box
概念: 這是CSS3提供的,專門爲移動端所設計的;
使用: 在父元素中設置display:box,在子元素中設置box-flex:1
(能夠設置爲其餘數字,好比設置爲2,就表示設置該子元素
剩下的空間佔據2等份的空間),這樣就會等分父元素中除去
全部子元素內容所剩下的空間.

display:block 和 box-flex:2 在設置時,不一樣的瀏覽器有不一樣的前綴,
display: -webkit-box; //chrome瀏覽器
display: -moz-box; //火狐瀏覽器

-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex:1;

示例: <div class="nav">
<div class="left">11111111111111</div>
<div class="center">2222222222222222222222</div>
<div class="right"></div>
</div>

css樣式:
<style>
.nav{
display: -webkit-box; //chrome瀏覽器
display: -moz-box; //火狐瀏覽器
display: box;
}
.nav div{
height:200px;

}
.left{
-webkit-box-flex: 1; //使left佔3等份中的1份
-moz-box-flex: 1;
box-flex:1;
border:1px solid red;
}
.center{
-webkit-box-flex: 1; //使center佔3等份中的1份
-moz-box-flex: 1;
box-flex:1;
border:1px solid blue;
}
.right{
-webkit-box-flex: 1; //使right佔3等份中的1份
-moz-box-flex: 1;
box-flex:1;
border:1px solid green;
}

</style>

3. em 單位
em跟px同樣,都是用於設置元素大小或間距的單位,但px表明像素單位,而
em是一個相對單位,它是相對於當前元素的字體大小的一個單位,若該元素
自己沒有設置本身的字體大小,那它會繼承父元素的字體大小,若是其父元
素也沒有設置字體大小,那麼它會繼承瀏覽器的字體大小;

注意: em會影響自身元素及其子元素的大小,不會影響父元素的大小

例如: 當前元素的字體大小爲20px,那麼1em=20px;若當前元素的字
體大小爲30px,那麼當前元素的 1em=30px;因此說em是相對
於當前元素的字體大小的一個單位.

div{
font-size:20px;
width: 10em;
height:20em;
border: (1/20)em solid red;
}
說明: 這個div的寬度就爲10*20=200px,高度就爲20*20=400px,
border就爲 0.05px solid red;

4. rem 單位
rem 根em類似,都是換算單位,只是rem與em換算時相對的元素不同,而且rem是
CSS3提供的,若是使用rem做爲換算單位,那麼該元素下的全部元素的換算
單位就不受當前元素的字體大小的影響,而是依據根元素的字體大小來換算的,
根元素通常是html或者瀏覽器,瀏覽器的字體大小默認爲16px;

二. 移動端的框架
zeptojs 跟jQuery框架很相似,但它有滑動效果的封裝
hammerjs 專門作手勢的js
jQueryMobile 爲移動端所開發的框架

三. jQueryMobil
概念: jQueryMobil是爲移動端的開發所設計的框架,它能夠說成是移動端的jQuery

使用時必須導入的三個核心文件:
1. jquerymobile-1.4.5.min.css 這是核心的CSS文件,導入html的head中
2. jquery.min.js jQuery的js文件,導入body標籤以後
3. jquerymobile-1.4.5.min.js 這時核心的js文件,導入jQuery.js以後

應用:在導入了上面三個核心文件以後,咱們就能夠開始咱們的移動端的開發了.

<div class="page" id="page1">
<div class="header">
頭部
</div>
<div class="content">
中間內容
</div>
<div class="footer">
尾部
</div>
</div>

說明: 1. 上面的三個類名是jQuerymobile設定好的類名,咱們不能隨意更改,
咱們能夠給div設置id或其餘屬性來區分它們;

2. 咱們知道在移動端中(如手機),屏幕呈現給咱們的都只有一個頁面,
因此這裏就能夠解釋一個頁面中有多個page,但屏幕在一個時刻只會
給咱們呈現一個page的內容,那麼是經過什麼來使同一個頁面中的
page相互跳轉或者是不一樣的html文件的頁面相互跳轉的呢?方式不少,
好比a標籤等等,可是咱們要知道,在jQuerymobile中頁面的跳轉
都是使用ajax來實現跳轉的.

page: 這是一個父元素,表明一個頁面,一個html中能夠有多個page;
當設置了多個page時,咱們能夠經過設置a標籤來跳轉到另外一個
page頁面(經過ajax來跳轉的)

header: 頭部,是jQuerymobile定義的頭部,咱們不能隨意更改

content: 中間內容部份,是jQuerymobile定義的內容區域,咱們不能隨意更改

footer: 尾部,是jQuerymobile定義的尾部,咱們不能隨意更改

四. jQuerymobile的屬性 data-ajax="true" 使用ajax加載 data-ajax="false" 不使用ajax加載 data-role="dialog" 使頁面加載進來的時候以彈出框的形式出現 data-role="button" 使a標籤爲按鈕形式 data-inline="true" 使button寬度縮小(button在jQuerymobile中是塊級元素,這樣就是設置爲行內元素) data-role="back" 回退按鈕,只能用於a標籤,從哪一個頁面跳轉就進來,就回退到哪一個頁面