微信小程序 效果图以iPhone6 为准

iPhone 6 下:
1px = 1rpx = 0.5 pt

iPhone 6 Plus 下:

1px = 0.6rpx

因为微信小程序在设计 rpx 的时候参照 iPhone 6 来设计,所以内部的转换是以 iPhone 6的大小来进行的。

结论

以 iPhone 6 的物理像素 750 x 1334 为视觉稿进行设计,而在小程序中使用 rpx 为单位。
因为 iPhone 6 下,1px = 1rpx。
使用 rpx,小程序会自动在不同分辨率下进行转换,而使用 px 为单位则不会。

注意:

字体不适宜使用 rpx,因为使用 rpx 后,字体会跟随设备的分辨率大小而改变大小。

举个例子

我现在有一张 750 x 300 的图片,
一般在程序里是这么写的

<image src='/images/xxx.png' style='width:375px;height=150px'>
</image>

这样写,在iPhone 6 下面是没有问题的。
然后在iPhone 6 Plus 下面看的话,就会看到右边出现空白的地方。
而在iPhone 5 下面看的话,就会看到右边有部分被屏幕挡住看不到。

然后使用 rpx 后,

<image src='/images/xxx.png' style='width:750rpx;height=300rpx'>
</image>

现在无论在iPhone 6、iPhone 6 Plus、iPhone 5 都显示的正常,没有问题。