對自適應的一些理解

　　最近公司在招人，對于移動端自適應的問題大部分回答的都不在我認為的答案。今天說一下自己對移動端自適應的理解，有錯歡迎指正。

　　移動端自適應最重要的就是單位了，移動端的屏幕尺寸實在太多了，所以一般會用單位實現，然后大部分會定義一個移動端最大寬度，超過這個寬度的移動端也只是顯示這個最大的寬度。一般我們會使用rem單位，配合vw、vh和百分比，這就可以解決移動端的自適應問題了。

　　rem應該不用多說了，建議使用手淘的就可以，很多會自己寫，簡單的幾行代碼，不過還是建議使用手淘的，不喜歡引用外部的，可以下載到本地。下載下來看看源碼，手淘的有一個初始化css的代碼的自執行函數，也有添加meta的函數，其中有判斷android、iPhone和dpr的代碼，還監聽了document和window的resize、pageshow、DOMContentLoaded。可以下載了然后格式化代碼簡單看一下。

　　vw、vh單位其實就是百分比，針對于可視區域的百分比。一般我們也會用百分比，百分比是針對父元素的，而vw、vh則是可視區域。比如你在一個寬高定死的塊元素內，定義寬度100vw，其實就是可視窗口的百分百，會超出這個父元素。

　　單位有了，再加上table、flex、grid這三個布局，移動端自適應幾乎完美解決了。一般推薦使用flex，table相當于創建了一個table，grid布局是css最強大的布局。普通場景跟flex布局差不多，但是flex是一維布局，grid是二維布局。兼容性幾乎也沒什么問題。感興趣的可以自己去查查。

　　移動端自適應也會有比較常見的坑，小數像素問題。比如1px邊框、圓角不圓。因為小數的像素會被四舍五入，但是被舍去或者添加的小數像素會被臨近的元素填充。還有，有文章說rem不支持dpr是3的情況。其它好像都問題不大了。

　　很多人會提到媒體查詢，其實現在做這方面的自適應比較少了，大部分都是一套PC和一套移動端，很少會有那種不同尺寸不同布局的網站了。

　　所以下次如果面試有人問到怎么做自適應，直接回答 rem單位加上vh、vw、寬度百分比和flex布局，如果還問，簡單說說rem、vh、vw的原理就夠了。

　　這就是我對移動端自適應的理解了，應該會有其它一些好的方案，歡迎指點。