本文讲述了在开发移动端项目时如何处理样式兼容问题，重点介绍了px、rem和vw单位的使用、换算以及在钉钉更新导致的安卓适配问题，分享了rem适配方案和vw替代rem的背景。
在开发移动端项目的时候，我们都会碰到一个隐性的问题：如何兼容样式？
虽然我已经习惯把H5demo项目直接copy过来，复用里面的css单位换算方案，但奈何最近钉钉更新，导致部分安卓机型第一次进入页面时样式错乱，人还是得明白px、rem、vw之间的区别，以及单位之间如何换算。
一、px
px，也就是像素pixel，从设计图的角度来说属于基本单位。
前端在开发时都是直接使用UI提供的设计图数值来写样式，比如按钮高度等。但设计图是死的，用户手机机型是随机的，哪怕我按iPhone SE的375x667来开发，客户也不会都用SE。
这个时候就需要引入换算的概念：
不能按375px的宽度，但是可以先通过clientWidth拿到真实宽度，再用真实宽度和375的比值同比放大/缩小，不就行了？
二、rem
rem，中文理解为相对单位，相对HTML根元素。
引入rem，将会根据根元素的font-size大小定义1rem，做到目标元素依赖根元素成比例保持大小关系。
举个例子：在375px宽度的图纸上，btn按钮的宽度是328px，也就是说btn的宽度应该占手机宽度的 328 ÷ 375 ≈ 0.8747份。这个比值可以适配其他机型的宽度，例如iPhone12是395px，btn的宽度相应就是395 × 0.8747 ≈ 345.49（单位：px）
rem的意义就是将这个运算过程通用成概念：
三、rem适配方案
3.1 main.js+config.less
首次加载时，计算1rem = ? px
/* 第一次加载设置font-size */
window.onresize = setHtmlFontSize
function setHtmlFontSize () {
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
const htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = htmlWidth / 10 + 'px'
}
750px宽度的设计图同样按10份划分。
那么原先的px单位换算为新单位@px: 75rem。
往后开发就可以直接使用设计图里给的数值，/@px 将会自动换算为真实数值。例如图中的1.8133rem，也就是68px。
//750设计稿等js计算基础样式 分成10份
@px: 75rem;
img {
height: 136/@px;
width: 136/@px;
}
3.2 amfe-flexible+postcss-pxtorem
四、vw
如果说，rem的适配是通过定义根元素和运算公式得出真实值，那vw/vh就更加直接了。
vw和vh是viewWidth和viewHeight的缩写，clientWIdth=100vw，clientHeight=100vh。
显然，vw和vh的概念就是将屏幕可视区域等分为100份，结合上述rem的计算过程，即1rem=?px=10vw。（因为rem适配等分了10份，rem和vw就是10倍的关系）
这么看来vw和rem的区别并不大，只是份数自定义和固定100而已。
其实我也是这么认为的，问题在于文章开头描述的：
由于钉钉更新，部分安卓机型第一次进入页面时样式错乱！！实际上是rem不再兼容，所以改用了vw单位。
所以这里也不多做赘述。
//750设计稿等js计算基础样式 分成10份
@px: 7.5vw;
img {
height: 136/@px;
width: 136/@px;
}
五、总结
起因是最近安卓不适配rem，过程是理解了rem/vw相关的比值和换算，结果是以此记录。
其实大部分都是参考的其他帖主内容，我在这里做个粗略的整合。往后可能还是会遇到兼容不适配的问题。没办法，H5总是在更新的。也许还有更集成的方式，直接一键适配。
谈谈 H5 移动端适配原理
https://zhuanlan.zhihu.com/p/656415648
vw/vh rem px 三者的转换（快速入门移动端页面编写）https://www.cnblogs.com/baihuatian/p/12070086.html
57
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
