移動端開發淺析

開發移動端應從如下幾方面考慮：

一、移動端佈局適配

二、移動端事件

三、移動端交互效果

四、移動端的前端框架

五、移動端開發調試

 

這裏主要講解第一點。在移動端適配中，不得不提到viewport和佈局方式：

viewport是視口，他的顯示狀況以下：

一、網頁會先放到viewport中

二、viewport縮放到瀏覽器尺寸

三、viewport放入瀏覽器

三、此時網頁內容也被縮放了

 

咱們可經過meta標籤設置viewport

meta標籤提供關於HTML文檔的元數據。他不會顯示在頁面上，可是對於機器是可讀的。可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵字），或其餘Web服務。

meta viewport的6 個屬性：

| width | 值 |

| -------- | -----: |

| initial-scale | 設置layout viewport 的寬度，爲一個正整數，或字符串"width-device" |

| minimum-scale | 設置頁面的初始縮放值，爲一個數字，能夠帶小數 |

| maximum-scale | 容許用戶的最大縮放值，爲一個數字，能夠帶小數 |

| height | 設置layout viewport 的高度，這個屬性並不重要，不多使用 |

| user-scalable | 是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許 |

 

佈局方式：

固定佈局：每一個元素都是固定的尺寸，內容區域居中在瀏覽器中間

響應式佈局：利用媒體查詢來時實現不一樣尺寸的瀏覽器顯示結構不一樣

自適應佈局：屬於響應式裏的一種，利用rem、 百分比、vwvh等佈局單位來實現

移動端佈局選用自適應佈局，在這裏應注意單位的選擇：

一、%  

簡單  無需設置  兼容性好   但基於父元素的屬性來設置，如父元素無寬高則設置無效

二、vwvh

一個vw等於viewport寬度的百分之一，一個vh等於viewport高度的百分之一

vmax等於vw和vh中較寬的那個  vmin等於兩個中較小的那個  簡單無需設置   可是兼容性很差

三、rem

一個rem等於根元素（HTML）的字體大小，兼容性很好  使用簡單   可是須要設置