移动端适配用 rem 还是 vw 更合适？

这题我踩过坑，说说我的经验。

vw适配本身没问题，你在低端安卓机出乱子大概率不是vw单位本身，而是别的原因。vw在Android 4.4+和iOS 7+都支持良好，那些所谓的"坑"更多是写法问题。

先说结论：直接用vw，别整那么复杂。

你之前用rem+js那套是不是类似这种？

document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px';

这套我用了很久，确实麻烦，而且有些机型会拿到错误的clientWidth值，特别是那些有系统栏或者刘海屏的，安卓机皇有时候都给你整出偏差。

vw就简单多了，但你的写法有个问题：直接写vw数值算死累死个人。正确姿势是用postcss插件自动转换：

npm install postcss-pxtorem postcss-px-to-viewport --save-dev

然后在postcss配置里写设计稿宽度，插件会自动帮你把px转成vw。比如设计稿375px，插件配置里设成375，然后你写代码时直接写px，编译完自动变成vw单位。

关于你低端安卓机布局错乱，更可能是这些原因：

一是vh单位在某些浏览器里有bug，尤其是带虚拟键的安卓机，vh计算会出问题，能不用尽量不用。

二是你用了font-size: 4vw这种，字体大小随视口变，低端机渲染起来容易出问题，文字会模糊甚至抖动。

三是你vw+vh混着用，有些老浏览器解析会抽风。

我的建议方案是这样的：

布局宽度用vw，字体用rem或者固定px。rem配合vw做根字体，比如html设置font-size: 13.3333vw（100/7.5），这样1rem就等于7.5px，写的时候还是用px，postcss转成rem。

具体配置大概这样：

module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
viewportUnit: 'vw',
fontViewportUnit: 'vw',
unitToConvert: 'px'
},
'postcss-pxtorem': {
rootValue: 37.5,
unitPrecision: 5,
propList: ['font-size']
}
}
}

这样布局用vw，字体用rem，兼顾了适配和稳定性。

还有一点提醒：别忘了在meta里设置viewport，禁止缩放。有些低端机默认允许缩放的话，vw计算会出问题。



基本上照这个来，适配问题能解决个九成。