移动WEB端，有没有类似小程序的rpx单位解决方案

Question

在微信小程序中，将屏幕分辨率定位在 750px ，然后以此为标准，前端开发者只需关注布局本身，而不用去纠结单位换算

如，一个 BOX 的设计宽度为 500px，对应到小程序中，直接写 500rpx ，绝大多数机型都会很友好的适配 ！

在 WEB 端，通常是定义根元素 htmlbody 相对字号 ，再换算成 rem、em 等相对尺寸单位，最后，根据屏幕分辨率，通过 media 选择器，控制根元素相对字号，达到适配的目的，这个实际生产中非常痛苦，蓝湖等其它切图辅助工具，通常都是 750px ，无论怎么换算，都要各种计算，而且效果不太理想 ！！可能是我没找对思路吧，想问问有没有好的解决方案，能达到小程序那种，让前端只要关注布局本身 ！

Answer 1

关于移动端适配问题，

• 传统的 rem 布局主要是要找到一个合适的根字号（如：100px）来做相应的单位换算，也比较容易计算，具体实现思路可看我的 这个回答
• 另一种可以使用 vw vh 视口单位来做适配，搭配 postcss-px-to-viewport 插件可以做到 px 自动转换 vw、vh

Answer 2

说白了就是你自己换算还是让框架帮你换算的问题。

uni-app 有一套 upx 机制，跟微信小程序的 rpx 很类似，只不过后者有运行时支持，前者是用 JS 动态计算 CSS 带单位的样式。再一点就是对于你使用 JS 动态修改 style 这种你就得自己换算了。

uni-app 可以多端输出，支持输出到 H5。

---

再不就 webpack 插件，这个就有挺多的了，不过缺点一样是动态 style 不支持。

Answer 3

有这样的方案。github 可以找到一个loader： postcss-rpx-to-viewport，它能在打包时将 rpx 转为 vw，不支持 vw 的浏览器做降级。这里附上 github 地址吧：https://github.com/RaySnow/po...