如何在普通Html中实现类似小程序中的 rpx 动态单位自适应效果

我们知道小程序 css 有个rpx单位,它是默认屏幕宽度是750rpx,不区分屏幕分辨率

如何从设计稿的px转为rpx,计算方法是:
css目标容器高度(rpx) = 设计稿目标容器高度/ (设计稿宽度/750)
css目标容器宽度(rpx) = 设计稿目标容器宽度/ (设计稿宽度/750)

提示:
这里的设计稿宽度是指设计稿本身基准宽度,比如常见的375、1080;

同理:
普通 html 中基准宽度是 100vw,那么
css目标容器高度(vw) = 设计稿目标容器高度/ (设计稿宽度/100)
css目标容器宽度(vw) = 设计稿目标容器宽度/ (设计稿宽度/100)

字体也可以这样计算,单位都是vw,这里的vw效果跟小程序的rpx效果一样,都是动态变化的,自适应屏幕大小

你可能感兴趣的:(css/css3)