WeChat 如何理解rpx

Unsplash

在小程序样式表中，我们绝大多数的长度单位都设置成 rpx，而不是我们常见的 px，使用 rpx 小程序会自动在不同的分辨率下进行转换，而使用 px 为单位则不会

UI 同学给我们的视觉稿一般是以 i6 为标准进行设计的，i6 的逻辑像素为 375*667 pt，视觉稿为物理像素 750*1334 px，其转换关系为 1px = 0.5 pt = 1rpx，我们在以往的移动端前端开发中，往往将视觉稿里的元素尺寸除以 2 而得到实际的元素尺寸，但在小程序中，可以按 1:1 的转换关系来设置元素尺寸，并能在不同分辨率设备下，保持一定的比例关系，下图是 100px 和 200rpx 的头像在 i6 和 iPad 设备上的显示效果

100px-200rpx-i6

100px-200rpx-ipad

或许其他同学会有疑问，为什么 i6 分辨率是 375（逻辑分辨率 pt），而视觉稿一般给 750（物理分辨率 px）？这是因为逻辑分辨率 pt 是按内容尺寸计算的长度单位，其大小和屏幕的尺寸有关；而物理分辨率 px 是按像素点计算的单位，跟屏幕大小没有关系，两者之间的关系为：一个 pt 对应多少个 px，即一个长度里能够包含多少个 px

我们无法形容一个点有多大，但能通过点的个数来形容，在 i6 设备下，1 个 pt 包含了 2 个 px，如果不是以 i6 的标准进行做图，视觉稿与 rpx, px 的转换关系就不是整数倍了，计算起来也比较麻烦，下图是小程序模拟器给出的每种机型的分辨率，需要注意的是，这里的分辨率指的是逻辑分辨率 pt，以 i6 为例，水平方向有 375 个逻辑像素点，而竖直方向有 667 个逻辑像素点，每个逻辑像素点包含 2 个物理像素点

机型分辨率

最后，在其他机型中，我们看到每个逻辑像素点包括 3 个或者更多的物理像素点，那是不是包含的物理像素点越多，我们所看到的画面就会越清晰？答案是不会，因为 Retina 屏已经达到我们肉眼所能分辨出来的极限

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为优秀作者献上一发助攻吧，谢谢！^ ^