移動端佈局總結

最近作了幾個移動端的項目，由於第一次接觸移動端的佈局，因此踩了幾個坑，今天總結一下，有不對的地方歡迎你們提意見。

移動端佈局須要考慮爲不一樣分辨率的設備都提供一個出色的使用體驗，下面我來總結一下移動端佈局的方法。

藉助庫

好比Bootstrap和MUI均可以實現自適應佈局，藉助於他們定義好的樣式，咱們不多須要本身從新寫樣式，節省了大量的開發時間，推薦使用。在樣式不能知足要求的狀況下，再本身重寫樣式。

容許網頁寬度自動調整

首先要想自適應必須加入一行viewport標籤：

<meta name="viewport" content="width=device-width, initial-scale=1" />

上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）爲1.0，即網頁初始大小佔屏幕面積的100%。

元素不使用絕對寬度

寬度不能出現px單位，而是用百分比或者auto（auto的話能夠不寫，塊級元素的寬度默認是auto）。

選擇加載CSS

利用媒體查詢，能夠爲不一樣分辨率的設備加載不一樣的樣式。

使用rem

他是相對於根元素（html）的font-size大小，用來代替em，避免了em的缺點。注意chrome的font-size小於12px是不起做用的，一種方法是使用特殊的方式彌補這個問題，另外一種方法是把把rem的係數減少，這樣可讓font-size保持在12px以上。

通常移動端的設計稿是640px，那麼在chrome中調試的時候，把瀏覽器的寬度調整到640px，html的font-size設置爲40px，設計稿中的尺寸除以40以後賦值rem，好比頁面的寬度就是640/40 = 16rem。爲了不重複的除法運算，能夠直接在PS中把尺寸縮小40倍再去測量便可。在頁面的開始須要一段JS代碼動態的計算頁面的寬度而後給html的font-size賦值，好比設備的寬度是1020px，那麼按照比例關係font-size賦值：1020*40/640 = 63.75。

使用vw,vh

1vw=瀏覽器寬度的1/100  1vh=瀏覽器高度的1/100

這是在CSS3種增長的一個很方便的屬性，實在是太方便了。 先看下兼容性 ，能夠看到目前的兼容性並很差，可是要往前看嘛，不久以後，瀏覽器對它的支持必定愈來愈強。

我以爲這個單位至關於把瀏覽器的寬度和高度等分紅了100份，咱們能夠利用這個屬性靈活的控制寬高等屬性，實現自適應佈局，自適應的標準正方形用這個屬性能夠很方便的實現。

說明

」不要用了錐子，就把全部的東西當作釘子「。技術人員應該根據需求等多方面因素挑選合適的解決方案，而不是運用死技術。

參考

自適應網頁設計（Responsive Web Design）