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
行文过程中出现错误或不妥之处在所难免, 希望大家能够给予指正, 以免误导更多人, 最后, 如果你觉得我的文章写的还不错, 希望能够点一下喜欢和关注, 为了我能早日成为简书优秀作者献上一发助攻吧, 谢谢!^ ^
来源: http://www.jianshu.com/p/00a38e0b559d