本文介绍如何将设计稿的px单位转换为小程序的rpx单位及HTML的vw单位，适用于不同屏幕尺寸的自适应布局。计算公式为rpx=设计稿高度/(设计稿宽度/750)，vw=设计稿高度/(设计稿宽度/100)。
我们知道小程序 css 有个rpx单位，它是默认屏幕宽度是750rpx，不区分屏幕分辨率
如何从设计稿的px转为rpx，计算方法是：
css目标容器高度(rpx) = 设计稿目标容器高度/ (设计稿宽度/750)
css目标容器宽度(rpx) = 设计稿目标容器宽度/ (设计稿宽度/750)
提示：
这里的设计稿宽度是指设计稿本身基准宽度，比如常见的375、1080；
同理：
普通 html 中基准宽度是 100vw，那么
css目标容器高度(vw) = 设计稿目标容器高度/ (设计稿宽度/100)
css目标容器宽度(vw) = 设计稿目标容器宽度/ (设计稿宽度/100)
字体也可以这样计算，单位都是vw，这里的vw效果跟小程序的rpx效果一样，都是动态变化的，自适应屏幕大小
扫一扫
3742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
