[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)