你真的了解「像素」吗？

[toFrankie]

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

从维基百科词源可知，像素 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.

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

四、设备独立像素（即逻辑像素）

设备独立像素（device-independent pixel），也称为「逻辑像素」，虽然它属于虚拟像素范畴，但是它固定不可变的，在显示设备出厂时便已确定。

从 YESVZ 网站可以查看常见设备的逻辑像素：

既然有了物理像素，为什么还要逻辑像素的概念，它是为了解决什么实际问题而出现的呢？

在很早以前，一个 CSS 像素由一个物理像素表示（即 DPR 为 1）。改变从 Apple 开始，随着 iPhone 4 发布，苹果向世界展示了一块显示效果俱佳 Retina 屏幕，其后高清屏如雨后春笋般出现，比如 720P、1080P、2K 屏等等，加之各设备的屏幕大小还不一样......面对如此之多不同尺寸不同分辨率的屏幕，对于软件开发者来说是非常头疼的，亟需一种「规范」或「方案」使得同一图像在不同设备上“看起来”一样，因此「逻辑像素」的概念就出现了。

前面提到过，虚拟像素到物理成像，是具有映射关系的。在 Web 领域中，这种映射关系可以用 DPR 表示。当 DPR 为 1 时，一个 CSS 像素用一个物理像素表示；当 DPR 为 2 时，一个 CSS 像素用两个物理显示表示，其他同理。

逻辑像素与 CSS 像素

网上很多文章，指出「逻辑像素等于CSS 像素」，真的是这样吗？

在「网页未缩放」情况下，逻辑像素与 CSS 像素是 1:1 的关系。如有缩放的话，其缩放比例就是逻辑像素与逻辑像素的比值。

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」，在当下高清屏大行其道的时代，这句话就成立了，一个虚拟像素不再等于一个物理像素。

设备像素比

DPR（Device Pixel Ratio，设备像素比），表示当前显示设备的物理像素分辨率与 CSS 像素分辨率之比。

在 CSS 规范中 window.devicePixelRatio 的计算逻辑如下（详见）：

1. If there is no output device, return 1 and abort these steps.
2. Let CSS pixel size be the size of a CSS pixel at the current page zoom scale factor and at a pinch zoom scale factor of 1.0.
3. Let device pixel size be the vertical size of a device pixel of the output device.
4. Return the result of dividing CSS pixel size by device pixel size.

关键词是「缩放比例为 1」、「输出设备处于垂直方向」（可以理解为手机竖屏状态）、

设备像素比是可变的，比如页面的缩放（但注意手势缩放不会）

未完待续...