移動端適配方案

flexible方案（阿里早期開源的一個移動端適配解決方案，引用 flexible後，在頁面上統一使用 rem來佈局）

核心代碼：

function setRemUnit () {

var rem = docEl.clientWidth / 10

docEl.style.fontSize = rem + 'px'

}

setRemUnit();

rem 是相對於 html節點的 font-size來作計算的。

咱們經過設置 document.documentElement.style.fontSize就能夠統一整個頁面的佈局標準。

上面的代碼中，將 html節點的 font-size設置爲頁面 clientWidth(佈局視口)的 1/10，即 1rem就等於頁面佈局視口的 1/10，這就意味着咱們後面使用的 rem都是按照頁面比例來計算的。

這時，咱們只須要將 UI出的圖轉換爲 rem便可。

以 iPhone6爲例：佈局視口爲 375px，則 1rem=37.5px，這時 UI給定一個元素的寬爲 75px（設備獨立像素），咱們只須要將它設置爲 75/37.5=2rem。

固然，每一個佈局都要計算很是繁瑣，咱們能夠藉助 PostCSS的 px2rem插件來幫助咱們完成這個過程。

下面的代碼能夠保證在頁面大小變化時，佈局能夠自適應，當觸發了 window的 resize和 pageShow事件以後自動調整 html的 fontSize大小。

window.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) {

if (e.persisted) {

setRemUnit()

}

})

 vh、vw方案

vh、vw方案即將視覺視口寬度 window.innerWidth和視覺視口高度 window.innerHeight 等分爲 100 份。

上面的 flexible方案就是模仿這種方案，由於早些時候 vw尚未獲得很好的兼容。

• vw(Viewport's width)： 1vw等於視覺視口的 1%

• vh(Viewport's height) : 1vh 爲視覺視口高度的 1%

• vmin : vw 和 vh 中的較小值

• vmax : 選取 vw 和 vh 中的較大值

若是視覺視口爲 375px，那麼 1vw=3.75px，這時 UI給定一個元素的寬爲 75px（設備獨立像素），咱們只須要將它設置爲 75/3.75=20vw。

這裏的比例關係咱們也不用本身換算，咱們可使用 PostCSS的 postcss-px-to-viewport 插件幫咱們完成這個過程。寫代碼時，咱們只須要根據 UI給的設計圖寫 px單位便可。

固然，沒有一種方案是十全十美的， vw一樣有必定的缺陷：

• px轉換成 vw不必定能徹底整除，所以有必定的像素差。

• 好比當容器使用 vw， margin採用 px時，很容易形成總體寬度超過 100vw，從而影響佈局效果。固然咱們也是能夠避免的，例如使用 padding代替 margin，結合 calc()函數使用等等...