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

末子
  • 63

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

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

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

回复
阅读 3.4k
3 个回答
✓ 已被采纳

关于移动端适配问题,

  • 传统的 rem 布局主要是要找到一个合适的根字号(如:100px)来做相应的单位换算,也比较容易计算,具体实现思路可看我的 这个回答
  • 另一种可以使用 vw vh 视口单位来做适配,搭配 postcss-px-to-viewport 插件可以做到 px 自动转换 vw、vh
ch-jobor
  • 1
新手上路,请多包涵

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

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

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

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


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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏