移動端頁面的幾個注意

標籤：響應   響應式布局   根據   布局   color   fun   百分比   doc   round   

相信大家對移動端頁面開發不會太陌生吧，但是它和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）的形式為好~~

移動端頁面的幾個注意