页面适配
小程序引入了一个新的尺寸单位 rpx,用于实现不同屏幕尺寸的适配。
rpx(responsive pixel)可以根据屏幕宽度进行自适应。
小程序专有的单位,它规定所有屏幕宽均为750rpx。
rpx 与 px 的换算关系
:
设备 | 屏幕尺寸 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
---|---|---|---|
iPhone5 | 320px | 1rpx = 0.42px | 1px = 2.34rpx |
小米MIX 2S | 360px | 1rpx = 0.48px | 1px = 2.083rpx |
iPhone6 | 375px | 1rpx = 0.5px | 1px = 2rpx |
iPhone6 Plus | 414px | 1rpx = 0.552px | 1px = 1.81rpx |
HUAWEI Mate 10 | 480px | 1rpx = 0.64px | 1px = 1.562rpx |
- 上述表格展示了 rpx 与 px 的换算关系,是由微信小程序在执行过程中自动换算的,开发者只需要了解换算关系就可以了。
- 注意:开发小程序时所有屏幕宽度都是 750rpx。适配方式采用rpx作为单位。