rpx
单位是微信小程序中css
的尺寸单位,rpx
可以根据屏幕宽度进行自适应。
规定屏幕宽为750rpx
。如在iPhone6
上,屏幕宽度为375px
,共有750个物理像素
,则750rpx = 375px = 750物理像素
,1rpx = 0.5px
。
在开发过程中两种换算,下面两种换算公式选一个用就可以了,更具自己情况而定,只是换算时乘除的区别,推荐用 (750 / 屏幕宽度) 这种。
设备 | rpx 换算 px 公式:(屏幕宽度 / 750) | px 换算 rpx 公式:(750 / 屏幕宽度) |
iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx |
- 在微信小程序开发的时候,通过
wx.getSystemInfo
获得的rpx
换算比例pixelRatio
值不对。
通过小程序开发工具iphone 5
模拟器进行测试,获得到的pixelRatio = 2
,但是通过屏幕宽750rpx
进行换算得到比例为2.34375
。
所以在通过系统给的这个比例进行换算px
到rpx
的时候,在不同屏幕上会出现问题,推荐使用通过自己换算的比例。 - 换算公式
获得换算比例 :
var pixelRatio1 = 750 / wx.getSystemInfoSync().windowWidth; // 推荐 var pixelRatio2 = wx.getSystemInfoSync().windowWidth / 750
rpx 转 px:
var px1 = rpx / pixelRatio1; // 推荐 var px2 = rpx * pixelRatio2;
px 转 rpx:
var rpx1 = px * pixelRatio1; // 推荐 var rpx2 = px / pixelRatio2;
- 我这边有封装 js 文件,导入即可使用 微信小程序 - 设备信息与版本更新。