如果你之前被 px / pt / dp 弄糊涂了,绝对不是你笨,而是这些概念常常被讲得又学术又碎。今天我们就从底层把这三个单位讲透。看完后当你再遇到这些单位时,心里会很踏实许多。
想象你面前有一块“LED 拼接大屏”,是由一颗颗小灯珠排成的网格组成的。每一颗小灯珠,就是一个 物理像素(physical pixel)。手机屏幕也是一样,里面密密麻麻排满了小方格,每个小方格可以发不同的颜色。
比如一块屏幕的参数写着:750 × 1334,意思是:宽方向有 750 个小格,高方向有 1334 个小格。这就是我们说的 px(pixel )。
px = 硬件世界里的“最小方格单位”。所以请记住一句话:px 是“屏幕造出来就定死的格子数量”,你改不了。
如果设计师直接用 px 来设计,会遇到一个很现实的问题,同样是 100px × 100px 的按钮 放在一个 750px 宽的小屏上,看起来挺大 放在一个 1440px 宽的大屏上,就显得很小,你不可能每出一台新手机就重画一次设计稿,对吧?于是 iOS 和 Android 各自发明了一种“抽象单位”:
这两个东西的核心目的只有一个:屏幕再怎么换分辨率,“看上去差不多大”就行。
你可以把它们想象成:
你画图的时候不要老盯着“有多少块砖”,而是用一把统一的尺子去标:这个窗户 1m 宽、门 2m 高。施工时工人会根据当地砖块大小去“换算”,使得建造的窗口肉眼看上去都差不多大。