rem的作用与运用，小程序为啥用rpx为单位

Posted 2023-03-23

参考技术A 开发过小程序的人都知道，小程序的单位是rpx，这是为什么？有什么作用呢，其实它源于rem布局，先来了解下rem的优势与工作原理。
rem布局在没正式使用到项目中，只知道他是根据html根元素的font-size来变化的;
若：html font-size:20px;
则1rem = 20px;
然后呢，有什么作用，定完html的font-size后，元素使用rem和使用px有什么区别，不都一样么？
其实rem他的主要运用场所在移动端，移动端的设计稿一般都是iphone6为基础设计的，设计稿的宽为750px；
手机的物理尺寸是375px；所以在用css的时候，设计尺寸需要除以2；
要用rem完成移动端的适配，需要固定浏览器的显示宽度不变。

也就是说，我在设计稿上量到宽367px的大小，那么css里可以直接写width:3.67rem。
此时，（以375px宽手机为例）第二步js设置的html字体大小为：375px除以7.5得50px；
7.5rem乘以50px得到的是375px刚好是屏幕的满宽。
也就是说，不论手机屏幕宽度多少，7.5rem永远能占屏幕的满宽。这样，在宽屏手机里，元素能够等比例放大一些，实现各类机型的适配，也方便了前端编码。

而做过小程序的人都知道，小程序不论任何机型，屏幕满宽都是750rpx，其实也就是从7.5rem延伸而来，至于根目录字体大小的配置，微信开发者工具已经将这些都配置好了，你尽情用就可以了。
如果有帮助，请点赞支持哦。

小程序初识

1.rpx 是微信小程序解决自适应屏幕尺寸的尺寸单位。微信小程序规定屏幕的宽度为750rpx。

无论是在iPhone6上面还是其他机型上面都是750rpx的屏幕宽度，拿iPhone6来讲，屏幕宽度为375px，把它分为750rpx后， 1rpx = 0.5px。

微信小程序同时也支持rem尺寸单位， rem 规定屏幕的宽度为20rem, 所以 1rem = (750/20)rpx = 37.5 rpx