[TOC] # 前言 目前 ios8、安卓 4.4 以下的用戶已經非常少了，caniuse 上面顯示，在中國這部分用戶只有 1.2%，比例已經非常低了，而這部分用戶的手機估計只會打打電話不會使用互聯網的（還是需根據各自產品的用戶數據分析來決定是否使用 `vw`）。 如果你的頁面只適用于微信、qq，那絕對能放心使用`vw`單位，還可以配合`vh`針對一些特殊比例屏幕做處理，徹底擺脫使用`rem`帶來的副作用（與`font-size`強耦合會引發副作用，`vw`布局相較之下更純粹代碼邏輯也更清晰），刪掉 html 頭部計算`font-size`的那段 js 代碼，讓你的代碼更純粹。 # 使用`vw`布局頁面 設置 meta 為移動端： ~~~ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> ~~~ （以下都以 iPhone 6 的尺寸為例） 方案一（用 sass 比較方便）： 最簡單的方案就是所有的布局元素及屬性都用`vw`來做單位，對應關系是： 設計稿 `750px —> 100vw` 那我們書寫時計算：`(x/750)*100vw` sass： ``` $vw_base: 750; @function vw($px) { @return ($px / 750) * 100vw; } ``` 方案二： 沿用 rem 布局方案，所有的布局元素及屬性都用 rem 做單位，用 vw 單位給 html 設置 font-size 形成 “流單位”，這樣就不再需要 JS 來動態計算根元素字體大小。 如果以前你習慣了約定`750px`設計稿的根元素字體大小為`100px`的話，你可以直接設置： ``` // 750px設計稿 html{ font-size: 13.3333vw;//(100px/750px)*100vw } //640px設計稿 html{ font-size: 15.625vw;//(100px/640px)*100vw } //1080px設計稿 html{ font-size: 9.25926vw;//(100px/1080px)*100vw } ``` 也可以通過 css 的計算函數自動計算配置： ``` /* 設計稿寬度為750px,根字號為100px */ :root{ --psd: 750; --rfs: 100; } html{font-size: calc(100vw / var(--psd) * var(--rfs));} @media screen and (min-width: 750px) { html{font-size: 100Px;} body{width: 750px;} } body{ max-width: 750Px; margin: 0 auto; } ``` 方案三： vm 結合 rem 單位來實現布局？rem 彈性布局的核心在于動態改變根元素大小，那么我們可以通過： 1. 給根元素大小設置隨著視口變化而變化的 vw 單位，這樣就可以實現動態改變其大小。 2. 限制根元素字體大小的最大最小值，配合 body 加上最大寬度和最小寬度 這樣我們就能夠實現對布局寬度的最大最小限制。 ``` // rem 單位換算：定為 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推 $vw_fontsize: 75; // iPhone 6尺寸的根元素大小基準值 @function rem($px) { @return ($px / $vw_fontsize ) * 1rem; } // 根元素大小使用 vw 單位 $vw_design: 750; html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; //就是相當于20vw // 同時，通過Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } } // body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小 body { max-width: 540px; min-width: 320px; } ``` # 示例頁面 https://jdc.jd.com/demo/ting/vw_rem_layout.html [http://meeting.bioon.com/moyan/index.html#/?from=native](http://meeting.bioon.com/moyan/index.html#/?from=native) [https://huodong.m.taobao.com/act/layouttestvw.html](https://huodong.m.taobao.com/act/layouttestvw.html) # 方案進化總結 [再聊移動端頁面的適配](https://www.cnblogs.com/zhouyangla/p/9273700.html) [如何在 Vue 項目中使用 vw 實現移動端適配](https://www.cnblogs.com/yikuu/p/9052148.html) [在 create-react-app 項目中使用 vw 實現手淘 vw 移動端適配布局](https://juejin.im/post/5a70742c6fb9a01cbc6eaffb) [如何利用vw+rem進行移動端布局](https://juejin.im/post/5b29f476e51d455892718380) [細說移動端 經典的 REM 布局 與 新秀 VW 布局](https://www.cnblogs.com/imwtr/p/9648233.html) [rem,*vw*, 還是...? 各憑本事的移動端適配方案](https://juejin.im/post/5bc07ebf6fb9a05d026119a9) [認識視口單位 vm、vh 在網頁中的排版應用](http://caibaojian.com/viewport-based-typography.html) [vue 移動端 h5 適配解決方案（rem or vw）](https://juejin.im/post/5d54c80bf265da03ae786e9b) [H5 移動端頁面適配解決方案 vw](https://www.jianshu.com/p/5182ff995776) [純CSS3使用vw和vh視口單位實現自適應](http://caibaojian.com/vw-vh.html) [不要再問我移動適配的問題了](https://segmentfault.com/a/1190000017784801) [移動端頁面適配———多方案解析](https://www.jianshu.com/p/3b45aa981e77)