最近做了幾個移動端的項目，因為第一次接觸移動端的布局，所以踩了幾個坑，今天總結一下，有不對的地方歡迎大家提意見。
移動端布局需要考慮為不同分辨率的設備都提供一個出色的使用體驗，下面我來總結一下移動端布局的方法。
借助庫
比如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份，我們可以利用這個屬性靈活的控制寬高等屬性，實現自適應布局，自適應的標准正方形用這個屬性可以很方便的實現。
說明
”不要用了錐子，就把所有的東西看成釘子“。技術人員應該根據需求等多方面因素挑選合適的解決方案，而不是運用死技術。
參考