WeChat 如何理解rpx

2024-03-19 15:10:30 浏览数 (2)

UnsplashUnsplash

在小程序样式表中,我们绝大多数的长度单位都设置成 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-i6100px-200rpx-i6
100px-200rpx-ipad100px-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 屏已经达到我们肉眼所能分辨出来的极限

0 人点赞