工作当中设计师和程序员常常需要互相确认设计或切图的尺寸, 如果双方没有协调好, 沟通过程中很可能出现 "驴唇不对马嘴" 的情况. 无论设计师或程序员, 理解屏幕尺寸单位换算, 以及对方计算尺寸的方式都很有必要.
单位
pt
pt stands for point, 即物理长度单位, 1 pt = /72 inch
px
px stands for pixel, 即像素点
inch (diagonal)
通常设备的屏幕尺寸会标为 x inch (diagnoal), 表示屏幕对角尺寸为 x inch.
ppi
ppi stands for pixels per inch
因为设备的屏幕尺寸通常会标为 inch (instead of square inch), 所以会有 ppi 这个奇怪的单位, 用于衡量像素密度.
如 iPhone 8 的斜向尺寸为 4.7 inch, 像素尺寸为 1334 x 750 px, 则 iPhone 8 的 ppi 等于 sqrt(1334 ^ 2 + 750 ^ 2) px / 4.7 inch = 326 px / inch.
显然 ppi 越高, 屏幕越清晰.
像素倍率
像素倍率是在物理长度 pt 和像素点 px 间换算的倍率关系, 如 iPhone 8 的屏幕横向长度为 375 pt, 横向像素有 750 个, 因此 iPhone 8 的像素倍率为 750 / 375 = 2.
换算
PhotoShop
iPhone 8 的屏幕宽度是 375 pt, 像素倍率是 2, 所以 iPhone 8 上全屏宽度是 750 px, 设计的时候若使用了 375 px 宽度的画布, 则在导出的时候需要导出 "@2x" 的图片.
css
如果用 css 定义一个元素的宽度, 会发现 iPhone 8 的屏幕宽度是 375 px (在 css 中), 为什么与上一小节提到的不同呢? 这里有一个坑, 就是 iPhone 8 在显示 HTML 页面的时候, 会自动放大像素倍率, 在 iPhone 8 上为 2, 所以, 看起来 375 px 刚好充满完整的宽度.
但是要注意这个尺寸是经过放大的, 所以, 尽管一张宽度为 375 px 的图片可以充满屏幕宽度, 但如果要充分利用 iPhone 的显示能力, 应该将宽度扩大两倍.