rpx是微信对于rem的一种应用的规定
官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx。
所以在微信小程序中1rem=750/20rpx。
因为如果以iphone6为标准,并且在iphone6上将fontsize设置成62.5%。
那么1rem就等于10px,我们只要将设计师标注的尺寸(一般标注的是物理分辨率)除以20就可以得到单位为rem的数值了。
1rpx = 0.5px = 1物理像素。
rpx称为相对像素值,rpx与物理像素也并非绝对的一比一关系。
wxss将设备宽定义为750rpx,是以iPhone6的分辨率(750x1334)为基准划分的。
将rpx转化px
// 在 iPhone6 下运行:
var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 输出 375(单位 px)
// 在 iPhone6 Plus 下:
var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 输出 414 (单位 px)
//假设我想向右平移300rpx,动画代码如下:
this.animation.translateX(300 / 750 * systemInfo.windowWidth).step()
这样在所有机型上都可以进行适配。