移動端頁面的幾個注意

相信你們對移動端頁面開發不會太陌生吧，可是它和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的，這樣會更方便，可是這樣每每會把HTML fontSize變成0.幾px ,別忘了瀏覽器通常會限制最小的fontSize，例如chrome會把全部小於12px的都定爲12px，所以咱們不會把1/100換成1。

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

3.touch事件

1.單點 

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