相信大家對移動端頁面開發不會太陌生吧，但是它和PC頁面之間究竟有什麽差別呢？

1.響應式布局

所謂響應式布局，核心內容就是media了,它類似與if的寫法

@media (條件){

　　/* css語句 */

}

舉個栗子:

在屏幕分辨率為320px與980px之間的div會加上background:red的css樣式

@media (max-width:980px and min-width:320px){
    div{
        background: red;
    }
}

ps:寫法類似的如 @supports,CSS3的條件判斷就只有2個：

其一是“@media”規則，主要用來“根據媒體屬性區分樣式表。
其二是“@supports”規則，在不支持CSS3的瀏覽器下實現漸進增強式設計。

/* 如果瀏覽器支持display:flex,section加上display:flex和background: red;樣式 */
@supports (display:flex) {
  section { 
    display: flex;
    background: red;
  }
}    

/* 如果瀏覽器不支持display:flex,section加上float:left和background: green;樣式 */
@supports not (display:flex) {
  section { 
    float: left;
    background: green
 
;
  }
}    

2.media_viewport和rem

<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0" />

相信大家對以上代碼並不陌生吧，這是移動端頁面必須加的meta，這個對下面的html fontSize的計算有著影響，最常用的conten屬性t就上面寫這3個，記住這三個基本就行了。

如果不加上這段meta viewport clientWidth將會被解析成瀏覽器默認值，例如980px、1024px等，最終會影響到html的font-size計算~~

說到rem就不得不提及em，em是相對字體大小來定義，例如一個div的font-size：12px 那麽它的2em就相當於24px了

而rem是相對於html標簽的font-size，因此我們想要寫出一些隨著屏幕大小變化而變化的頁面（兼容不同分辨率的頁面），我們可以考慮用rem這個單位，我們也只需要在每次window.onload的時候計算一下

window.onload = function(){
    //designWidth/自己喜歡的字體大小 = 846px/100px = 8.46
    //我們采用基準fontSize是100是便於計算，設計稿上的px轉化為rem只需要除以100
    document.documentElement.style.fontSize = document.documentElement.clientWidth/8.46 + ‘px‘;
}

所以一般我們用 實際設備寬度/（設計稿寬度/100） 來計算出html fontSize的大小，到時候所有的單位大小都安裝設計稿的1/100倍來寫就ok了，當然我們把100直接換成1也是ok的，這樣會更方便，主要看個人習慣。

ps:有些開發者也喜歡用百分比來定義html fontSize 例如62.5%,絕大部分瀏覽器默認字體大小都為16px，所以62.5%*16 = 10，化成10px就方便寫樣式了~

3.touch事件

1.單點

主要包括touchstart touchmove touchend，當然這是dom3的事件，要兼容的話最好寫成事件綁定（addEventListener）的形式為好~~

移動端頁面的幾個註意