移動端適配新思路

於移動端的適配方案，目前用的比較多的是三種方案： 

1.  固定高度，寬度自適應 （ 騰訊 、 京東 、 百度 、 天貓 、 亞馬遜 的首頁都是使用的這種方法。）；
2.  固定寬度，viewport縮放 （目前已知 荔枝FM 、 網易新聞 在使用這種方法。有興趣的同窗能夠看看是怎麼作的）；
3.  rem作寬度，viewport縮放 （ 淘寶 使用的方案）；

這些方案都有小試，這三個仍是有坑的。固然並非說這些方案很差，而是想尋找更爲適用的解決方案。若是有用過或看過淘寶的解決方案的，那應該會注意到淘寶的解決方案中有 設備像素比 ＝ 物理像素 / 設備獨立像素 的概念。這個比較高端，不是很好理解這和咱們作頁面有什麼關係。其經過js去設置Html的字號大小，而後用rem來作單位以達到適配（詳情請查看淘寶的 Flexible）。總體來講兼容性強，可是要爲  IOS 4-5s  IOS 6-6s 寫獨立的樣式，這就比較坑爹了。

本文要說的新解決方案，就是用淘寶的思路（經過設置html的字號，而後用rem來作單位以達到適配），卻又不走淘寶的路（用js卻設置html的字號大小，爲IOS 4-5s  6-6s 寫獨立的樣式）。

爲html設置字體大小，但單位卻不是用px，而是是vw! px單位是固定的，若是遇到不一樣的分辨率，那麼要達到兼容就得去從新設置值。這樣就又得用js。而用vw單位卻不用，由於vw這單位並非固定的。

示例代碼：

h1{font-size:8vw;}

 若是視口的寬度是200px，那麼上述代碼中h1元素的字號將爲16px，即(8x200)/100; 與百分比（%）類似。

這種狀況下，html的字號大小就會根據你的屏幕寬度來改變其實際的大小。還要注意一點就設計稿的px單位與寫頁面的rem單位比較難換算，雖然淘寶也放出的rem與px的轉換插件，但寫起來容易維護起來就頭疼了！因此在設置html字號大小的時候要考慮px與rem的轉換問題。若是1rem=100px，那麼咱們在計算時就相對的要容易的多了。而已在維護時也能好維護，不用去算來算去。

說了這麼多，那到底這解決方案是怎麼樣的呢？下面就爲你們講解：

html字號用vw單位的解決方案
html字號與設計稿寬度的關係與計算方式
     100            /       設計稿寬度      =    html字體
(頁面寬100vw)       (100px=1rem)         (vw單位)

eg:  750px設計稿：
100  /   7.5rem   =  13.333vw

eg: 640px設計稿：
100  /   6.4rem   =15.625vw

在此解決方案中，用rem作爲全部的單位。如在設計稿中，字體大小爲24px，則使用中爲0.24rem。沒錯，字體大小也用rem作爲單位這樣能確保作來的頁面與設計稿徹底一致。

其原理確實很簡單，以寬750px的設計稿爲例。

咱們先設定100px=1rem，那麼設計稿 750px=7.5rem； 頁面的寬爲100vw，那麼100vw/7.5rem=13.333vw/rem => 1rem=13.333vw;

頁面大小恆定爲7.5rem，rem是基於html字號大小，html字號大小基於屏幕寬度。因而屏幕寬度就直接影響到了rem單位。這與百分比的佈局有點相同，但百分比沒法用於設置高度（並非全部的手機長寬比都是同樣的），而rem單位卻能用來設置高度。由於rem是基於html的字號大小而不是基於屏幕的高度。

設置一個正方形的DIV寬爲7.5rem,高爲7.5rem；無論是多寬的屏幕這個div都會是7.5rem（100vw）的高寬（由於1rem=13.333vw），都正好與屏幕寬度適配。這就是本解決方案的核心。

此解決方案盡適用於移動端，還沒有發現bug，若有發現請指正。