作者：子非鱼
转发链接：https://mp.weixin.qq.com/s/uQ8c2Z6GJr4eyH3kidZt3g
随着Web技术的革新，移动端适配方案也在不断的变化，网上有很多关于移动端适配的文章，说什么rem布局已经过时，vm适配才是最好的适配方案。有这种理解的同学是错误的，任何适配方案都有它的优缺点，要结合自己的使用场景来进行选择。
前面小编也发布了几篇关于移动适配的文章，一起来复习一下：
《吃透移动端 H5 与 Hybrid｜实践踩坑12种问题汇总》
文章先讲一下几种常见的适配方案，然后再看看几个大厂（腾讯、京东、网易、小红书、微博、美团、B站、搜狐、饿了么、携程、大众点评、知乎、拍拍贷、陆金所）的移动端页面都采用了什么样的适配方案，最后讨论下各个适配方法的适用场景和优缺点，如果有不对之处，希望能得到大佬们的指正。
1
并不是所有场景都适合用用rem或vw进行适配。
2
vm适配不是万能的，最好与rem配合使用
1
rem适配的本质是布局等比例的缩放，通过动态设置html的font-size来改变rem的大小。
1<!-- dpr = 1-->
2<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
上面把scale设置成固定1倍的视口的大小，也可以根据dpr的值缩放viewport，如下：
1//下面是根据设备dpr设置viewport
2var dpr = window.devicePixelRatio || 1
3var scale = 1 / dpr
4
5viewport.setAttribute(
6 "content",
7 "width=device-width" +
8 ",initial-scale=" +
9 scale +
10 ", maximum-scale=" +
11 scale +
12 ", minimum-scale=" +
13 scale +
14 ", user-scalable=no"
15)
有几点要注意
核心代码为如下
1// set 1rem = 逻辑像素（设备独立像素） / 10
2function setRemUnit () {
3 var rem = document.documentElement.clientWidth / 10
4 // 375/10 = 37.5
5 docEl.style.fontSize = rem + 'px'
6}
7setRemUnit()
1module.exports = {
2 plugins: {
3 'autoprefixer': {
4 browsers: ['Android >= 4.0', 'iOS >= 7']
5 },
6 'postcss-pxtorem': {
7 rootValue: 37.5,
8 propList: ['*', '!font-size'],
9 selectorBlackList: ['van-circle__layer', 'ignore'],
10 }
11 }
12}
在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前。
2
vw适配
vw是基于Viewport视窗的长度单位，这里的视窗（Viewport）指的就是浏览器可视化的区域，而这个可视区域是window.innerWidth/window.innerHeight的大小，用图简单的示意如下
在CSS Values and Units Module Level 3中和Viewport相关的单位有四个，分别为vw、vh、vmin和vmax。
如果设计稿使用750px宽度，则100vw = 750px，即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。如果不想自己计算，我们可以使用PostCSS的插件postcss-px-to-viewport，让我们可以直接在代码中写px。
1{
2 loader: 'postcss-loader',
3 options: {
4 plugins: ()=>[
5 require('autoprefixer')({
6 browsers: ['last 5 versions']
7 }),
8 require('postcss-px-to-viewport')({
9 viewportWidth: 375, //视口宽度（数字)
10 viewportHeight: 1334, //视口高度（数字）
11 unitPrecision: 3, //设置的保留小数位数（数字）
12 viewportUnit: 'vw', //设置要转换的单位（字符串）
13 selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
14 minPixelValue: 1, //设置要替换的最小像素值（数字）
15 mediaQuery: false//允许在媒体查询中转换px（true/false）
16 })
17 ]
18}
3
搭配vw和rem
1// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
2$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
3@function rem($px) {
4 @return ($px / $vm_fontsize ) * 1rem;
5}
6// 根元素大小使用 vw 单位
7$vm_design: 750;
8html {
9 font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
10 // 同时，通过Media Queries 限制根元素最大最小值
11 @media screen and (max-width: 320px) {
12 font-size: 64px;
13 }
14 @media screen and (min-width: 540px) {
15 font-size: 108px;
16 }
17}
18// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
19body {
20 max-width: 540px;
21 min-width: 320px;
22}
4
px 适配
就像开篇提到的，并不是说移动端就一定要使用相对长度单位，传统的响应式布局依然是很好的选择，尤其在新闻，社区等可阅读内容较多的场景直接使用px单位可以营造更好地体验。px方案可以让大屏幕手机展示出更多的内容，更符合人们的阅读习惯。
互联网大厂的适配调研
1
rem适配例子
注：下面描述的rem与px的对应关系是在设备独立像素为375px（iPhone6/7/8）情况下。
拍拍贷m站首页（https://m.ppdai.com/）
小红书（https://www.xiaohongshu.com/）
1@media screen and (min-width: 768px)
2body {
3 width: 450PX!important;
4}
微博（https://m.weibo.cn/）
下面描述的rem与px的对应关系是在设备独立像素为375px（iPhone6/7/8）、viewport scale 0.5的情况下。
美团（http://i.meituan.com/）
B站主站（https://m.bilibili.com/index.html）
搜狐（https://m.sohu.com/）
2
拍拍贷借款页（https://ld.ppdai.com/loan/mobile_base/373/25999?）
3
京东（https://m.jd.com/）
image.png
4
携程（https://m.ctrip.com/html5/）
大众点评（https://m.dianping.com/）
知乎（https://www.zhihu.com/）
腾讯（https://xw.qq.com/）
陆金所（https://m.lu.com/）
以上只是自己的拙见以及自己这一两年有关于移动端适配的一些探索，如果有不对之处，还请各路大神指正。
作者：子非鱼
转发链接：https://mp.weixin.qq.com/s/uQ8c2Z6GJr4eyH3kidZt3g
京公网安备 11010802035086号