微信小程序样式中的 Rpx 是什么?
打开微信的初始化项目案例后,我发现样式表中有一个很奇怪的单位 rpx
, 很显然这是用来描述字体,位置等大小的单位,一般我们在开发中会用到的是 px
, em
, rem
等单位,那么这个rpx是什么东西呢?
1 | .userinfo-avatar { |
在微信官方的IDE中,我们看到编译之后的结果是:
1 | .userinfo-avatar { |
在编译的时候 128rpx
被转换成了 3.41333rem
; 不过具体的转化流程还不是很清楚;
然后我就在微信官方IDE的包里面搜索rpx,然后就有收获了:
1 | t.transformRpx = function (e) { |
相应的我找到了其中的两个变量:
1 | t.RPX_RATE = 20 |
所以小程序中设备的基础宽度是750px
, 然后rpx到rem的转换就是
1 | rem = rpx*RPX_RATE/BASE_DEVICE_WIDTH |
深入理解:
微信小程序的设备基础是750px,因此开发的时候我们可以按照750px大小为基础开发,譬如说在750px上某个view的宽度是300px,那么在样式中就可以写 300rpx, 小程序在编译的时候会转化成rem单位的,这样方便在其他设备上扩展使用