你真的了解「像素」吗？

配图源自 Freepik

一切都从「像素」开始...

从维基百科词源可知，像素 pixel 一词由 pictures 和 element 两个词的简写形式 pix 和 el 结合而来。

像素，在数字成像中是不可分割的最小单元，可分为两类：

• 虚拟像素：其大小是任意的、可变的，没有实际的物理尺寸大小。
• 物理像素：通常用于描述手机、电脑、显示器等设备的像素，它在设备出厂时已经确定，是不可变的，具有实际的物理尺寸大小（一般使用英寸表示）。

物理像素（即屏幕像素，screen pixel）是显示设备成像的最小单位。我们「肉眼」看到的物理像素都是真实的物理发光元件，既然是物理元件，就不可能「无缝」填满整个屏幕，而且像素（即元件）大小、形状也是可以自由定义的，在屏幕上多是方形或者接近方形的。两个相邻像素之间的距离就是点距（dot pitch），点距越小成像越细腻，近距离使用体验越好。

但并不是说像素紧密排列就意味着「视觉效果」更好，比如说户外硕大的 LED 广告牌，是可以明显地看到黑色缝隙的，原因是它们的元件排列是有间隙的。

虚拟像素到物理成像，是有一定的映射关系的，具体由显示设备或打印设备来决定。

分辨率

我们发现，通常描述「分辨率」的单位也叫像素，但有什么区别呢？

• 物理屏幕分辨率（Physical screen resolution）：泛指电视机、电脑显示器、手机屏幕等显示设备的分辨率，它在设备出厂时便以确定，不可修改，而且是有着具体的物理尺寸大小。

  常说的 1920 × 1080 分辨率的手机，指的是显示器横向排列了 1080 个像素，纵向排列了 1920 个像素。

• 显示分辨率（Display resolution）：也称作屏幕分辨率（screen resolution），它没有具体的物理大小，是可以修改的。

  常说的“调节电脑屏幕分辨率”，修改的就是显示分辨率。当显示器分辨率与屏幕分辨率一致时，表示一个虚拟像素将会用一个物理像素来显示，此时显示效果是最佳的。当二者不相同时，将有相关系统使用算法去模拟像素，而这些模拟处理都会带来画质的损失。

• 还有很多分类，比如 Image resolution、Printing resolution、Sensor resolution 等等，详看 Wiki。

以上描述源自。

请注意，不能单凭显示器分辨率来计量屏幕的细腻程度。试想，同样是 1920 × 1080 分辨率，一个放在 5.5 英寸的手机屏幕上，一个放在 40 英寸的电视机屏幕上，细腻程度会一样吗？

屏幕尺寸

这玩意本来就是外国人发明的，因此常用单位「英寸」来描述。单位换算：1 英寸 = 2.54 厘米（cm）。

请注意，英寸是「长度」单位，而不是「面积」单位。

比如 4.7 英寸的手机，这里的 4.7 英寸指的是手机显示屏「对角线」的长度，而不是显示器的宽度或者高度，更不是面积。对，就是数学中直角三角形的那个斜边，勾股定理还记得吧。

下文将会提到的像素密度（PPI）表示「每英寸」屏幕所拥有的像素数，也是指对角线的长度，而非面积大小。

像素密度

像素密度（Pixel density），通常用来计量电子设备屏幕细腻程度。

像素密度的单位一般是 PPI（Pixel Per Inch，每英寸像素），表示单位长度上的像素数量（注意，不是单位面积的像素数量）。

电子设备的 PPI 取决于「屏幕尺寸」和「显示器分辨率」，计算规则如下：

其中，

• dp 为屏幕对角线的分辨率
• di 为屏幕对角线的长度（单位为英寸）
• wp 为屏幕横向分辨率
• hp 为屏幕纵向分辨率

以 4.7 英寸的 iPhone 7 为例，分辨率为 750 × 1334，像素密度约为 326PPI（在线换算）。需要注意的是，应以设备「实际尺寸」换算，而非厂商「宣传尺寸」，二者之间可能会有一定的偏差，自然计算结果就会产生误差。比如：

「数码相机」与手机等屏幕不同的是，数码相机的屏幕通常用「点色数」来描述，而不是像素。每个像素包含了三个点色数（分别是红、绿、蓝三原色）。以佳能 50D 相机显示屏为例，它有 920,000 个点色数（应该是约数），即 92 万色，通过这个数据，可以推算出屏幕为 307,200 个像素，分辨率为 640 × 480。因此，相机显示屏的点色数和像素常被人混淆（源自维基百科）。

还有，用于量度「打印机」打印精细程度的计量单位是 DPI。

DPI（Dots Per Inch，每英寸点数），表示单位长度上可打印的点数。

虽说 PPI 和 DPI 两者所用的领域存在区别，「像素」只存在于屏幕显示领域，而「点」只出现于打印或印刷领域。但由于 PPI 也会影响到图片的打印质量，因此容易出现混用或混淆的情况。比如，在 SONY Support 的一篇文章中指出：

Much of the confusion between these two terms happens for a couple of reasons. First, even though PPI refers to the resolution of an on-screen digital image, it can also affect the quality of the final printed picture. Second, even some professional print services request that pictures must be at a certain DPI level before they can be printed; what they normally mean is PPI, not DPI - thus, this adds to the confusion.

由于本文的重点讨论的是显示屏幕领域像素之间的关系，而非打印领域，加之本人对此并不是很了解，因此不作过多介绍，点到为止，哈哈！

设备独立像素

DIP（device-independent pixel，设备独立像素；density-independent pixel，密度独立性），是一种长度单位， 常见简写形式为 DP 或 DIP。

在 Android 开发中很常见，一种基于屏幕密度的抽象单位，这些单位与 160 dpi 屏幕相关（通常 Android 设备的分辨率是 160 的整数倍）。在 Android 操作系统上，1dp 相当于 160dpi 屏幕上的一个物理像素，dp 与物理像素的比例会随着屏幕密度而变化，但不一定成正比。

而在 Web 设计中应以 px 作为单位。其中 Material Design 设计指南中表示：

When designing for the web, replace dp with px (for pixel).

CSS 像素

我们知道，Web 标准由 W3C（The World Wide Web Consortium） 制定，在 CSS 标准中，长度单位包括「相对长度」和「绝对长度」两类。其中 px 是绝对长度单位之一（详见），

但真的「绝对」吗？

网上很多文章提到 px 归为「相对单位」， 原因有二：

1. 不加思索，人云亦云。
2. 所选参照物不一样。由于 CSS 像素与物理像素不一定是 1 : 1 的关系，它跟屏幕的像素密度有关，比如在 iPhone 7 下 1 × 1 的 CSS 像素，将会使用 2 × 2 个物理像素去渲染。在 Web 领域通常使用「设备像素比」（Device Pixel Ratio，DPR）去描述 CSS 像素与最终显示成像的关系。

我看到一句话「A pixel no longer equals a pixel」，在当下高清屏大行其道的时代，这句话就成立了，一个虚拟像素不再等于一个物理像素。

未完待续...