[TOC] # 移動端適配方案 盡管我們可以使用設備獨立像素來保證各個設備在不同手機上顯示的效果類似，但這并不能保證它們顯示完全一致，我們需要一種方案來讓設計稿得到更完美的適配。 <br> # flexible方案 `flexible`方案是阿里早期開源的一個移動端適配解決方案，引用`flexible`后，我們在頁面上統一使用`rem`來布局。 <br> 它的核心代碼非常簡單： ~~~ // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit(); ~~~ <br> `rem` 是相對于`html`節點的`font-size`來做計算的。 <br> 我們通過設置`document.documentElement.style.fontSize`就可以統一整個頁面的布局標準。 <br> 上面的代碼中，將`html`節點的`font-size`設置為頁面`clientWidth`(布局視口)的`1/10`，即`1rem`就等于頁面布局視口的`1/10`，這就意味著我們后面使用的`rem`都是按照頁面比例來計算的。 <br> 這時，我們只需要將`UI`出的圖轉換為`rem`即可。 <br> 以`iPhone6`為例：布局視口為`375px`，則`1rem = 37.5px`，這時`UI`給定一個元素的寬為`75px`（設備獨立像素），我們只需要將它設置為`75 / 37.5 = 2rem`。 <br> 當然，每個布局都要計算非常繁瑣，我們可以借助`PostCSS`的`px2rem`插件來幫助我們完成這個過程。 <br> 下面的代碼可以保證在頁面大小變化時，布局可以自適應，當觸發了`window`的`resize`和`pageShow`事件之后自動調整`html`的`fontSize`大小。 <br> ~~~ // reset rem unit on page resize window.addEventListener('resize', setRemUnit)window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) ~~~ <br> 由于`viewport`單位得到眾多瀏覽器的兼容，上面這種方案現在已經被官方棄用： <br> > lib-flexible這個過渡方案已經可以放棄使用，不管是現在的版本還是以前的版本，都存有一定的問題。建議大家開始使用viewport來替代此方案。 <br> 下面我們來看看現在最流行的`vh、vw`方案。 <br> <br> # vh、vw方案 `vh、vw`方案即將視覺視口寬度 `window.innerWidth`和視覺視口高度 `window.innerHeight` 等分為 100 份。 <br> 上面的`flexible`方案就是模仿這種方案，因為早些時候`vw`還沒有得到很好的兼容。 <br> * `vw(Viewport's width)`：`1vw`等于視覺視口的`1%` * `vh(Viewport's height)` :`1vh` 為視覺視口高度的`1%` * `vmin` : `vw` 和 `vh` 中的較小值 * `vmax` : 選取 `vw` 和 `vh` 中的較大值  <br> 如果視覺視口為`375px`，那么`1vw = 3.75px`，這時`UI`給定一個元素的寬為`75px`（設備獨立像素），我們只需要將它設置為`75 / 3.75 = 20vw`。 <br> 這里的比例關系我們也不用自己換算，我們可以使用`PostCSS`的 `postcss-px-to-viewport` 插件幫我們完成這個過程。寫代碼時，我們只需要根據`UI`給的設計圖寫`px`單位即可。 <br> 當然，沒有一種方案是十全十美的，`vw`同樣有一定的缺陷： <br> * `px`轉換成`vw`不一定能完全整除，因此有一定的像素差。 * 比如當容器使用`vw`，`margin`采用`px`時，很容易造成整體寬度超過`100vw`，從而影響布局效果。當然我們也是可以避免的，例如使用`padding`代替`margin`，結合`calc()`函數使用等等... <br> <br> # 參考資料 [關于移動端適配，你必須要知道的](https://juejin.im/post/5cddf289f265da038f77696c)