前端认知：PPI、DPI、设备像素等概念

[pekonchan]

前言

关于PPI、DPI、DPR、物理像素、逻辑像素等这些名词概念大家有所耳闻，也应该翻找了许多资料，无奈各种资料描述不一，概念混乱，一笔带过，甚至以讹传讹。没有什么实感去好好理解这些概念。

于是我尽自己所能，尽量描述，让大家有个实质性地认识。

像素

小时候学过数学我们都知道，点成线，线成面。所以在计算机中，一个图像（面）是有一个个点组合而成的。而这个最小的不可分割的点，就是我们常说的“像素”，pixel。如我们常说的分辩率为1366px*768px，就是指宽有1366个像素，高有768个像素组合而成。

像素是一个抽象的概念，不是一个确切的物理量，而真不是一个“点”，点的描述是方便我们去理解。

像素是在数字领域（虚拟世界）的一个概念，厘米这些长度是现实世界的一个概念，要从虚拟往现实中转化对其的认知，需要借助“图像分辨率”。
当图片尺寸以像素（px）为单位时，我们需要指定其固定的分辨率，才能将图片尺寸与现实中的实际尺寸相互转换。毕竟我们总不能拿把尺子去计算机屏幕上量200px*100px的图片多少厘米吧。

这里说的“图像分辨率”是要用下面所说的用PPI作为单位的表达方式。PPI是英寸和像素的关系桥梁，因此可以把像素往英寸方向转化。

分辨率

可以从显示分辨率与图像分辨率两个方向来分类

显示分辨率

又称显示分辨率，是屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多。

通常用每行像素数数目乘每列像素数目来表示分辨率。如1366px*768px。就是说屏幕水平方向上，有1366个像素点，在垂直方向上，有768个像素点。

屏幕分辩率是机器生产时已经确定好的了，即已经规定好了机器屏幕上是有多少个像素点组合而成。

但我们也知道，我们可以修改电脑的屏幕分辨率，这是怎么回事呢？

假设电脑的分辨率是1366px*768px，一般这个为电脑推荐你的分辨率，如果你私自调整成800px*600px，系统就会分配给你800*600个有效像素个数，也就是真实的色彩块。其他的个数呢，就由系统自作主张，通过一系列运算给你一个模拟色彩块，填充成正好1366*768个色彩块。

图像分辨率

图像分辨率则是单位英寸中所包含的像素点数，其定义更趋近于分辨率本身的定义。

从这个定义上来看很明显，跟PPI的含义是一样，所以PPI是用来表示图像分辨率的单位，如一图片分辨率为100ppi，含义是每英寸中所含有100个像素。

跟显示分辨率一样，图像分辨率也可以用“水平像素数×垂直像素数”来表达。其实我们知道ppi，也知道图像的宽高长度（如英寸为单位），就能算出图像是由多少个像素组成，即“水平像素数×垂直像素数”。

这里我们要知道，图像的显示宽高尺寸，不会受到PPI值直接影响，对于计算机的显示系统来说，PPI是没意义的，真正起作用的是图像的“水平像素数×垂直像素数”，只要“水平像素数×垂直像素数”一样，就算PPI不一样，图片同样显示一样的宽高尺寸。

此外，其实在不同的应用领域，图像分辨率也可以用不同的单位进行描述，如在打印领域中，也可以用dpi来描述。

分辨率比

这个常见于你用手机看视频，要求视频按照什么比例来展示。例如16:9，就是屏幕的高和宽的像素比例是16:9

屏幕尺寸

在真正了解这个含义之前，我常以为是指屏幕的宽高，就是屏幕的尺寸。实际上，在介绍产品时常说的，手机屏幕尺寸5.3英寸，电脑屏幕多少英寸之类的，不是指屏幕的宽高，而是指屏幕的对角线长度。

像素密度（PPI）

表示每英寸长度上有多少个像素，又叫像素数目。像素越多，代表画面更细腻更清晰。我们常说的视网膜屏幕（Retina），就是指PPI较普通屏幕要高。

ppi(pixels per inch)是图像分辨率的单位，图像ppi值越高，画面的细节就越丰富，因为单位面积的像素数量更多。

上述我们知道了屏幕尺寸是指对角线长度，如果又知道了屏幕的分辨率（即知道了宽高的像素值），那么宽高和对角线就形成了一个垂直三角形。利用勾股定理，可以算出对角线的像素值了。而又知道了对角线的英寸值，那么就可以算出屏幕的PPI值了

DPI

DPI（Dots Per Inch，每英寸点数）是一个量度单位，用于点阵数码影像，指每一英寸长度中，取样、可显示或输出点的数目。这里说的点，类似打印的“墨点”，打印成像是由这些墨点成线，线成面这样组合而成。

它是一个输出分辨率（打印分辨率），常用于描述打印机的打印精度，一般来说，DPI值越高，表明打印机的打印精度越高。它表示每英寸所能打印的点数，即打印精度

一般的激光打印机的输出分辨率是300dpi-600dpi，印刷的照排机达到1200dpi-2400dpi，常见的冲印一般在150dpi到300dpi之间。

图像的像素、打印分辨率和打印尺寸的关系如下：

图像的横向（竖向）像素数=打印横向（竖向）分辨率×打印的横向（竖向）尺寸

例如：希望打印照片的尺寸是4*3inch，而打印分辨率横向和竖向都是300dpi，则需要照相机采集的像素数至少为（300*4）*（300*3）=1080000像素，约一百万像素。采集的像素数过低（采集图像机器的PPI决定）会降低图像的打印质量，过高也不能提升打印质量。

ppi和dpi经常都会出现混用现象。但是他们所用的领域也存在区别。从技术角度说，“像素”只存在于电脑显示领域，而“点”只出现于打印或印刷领域。

设备像素、设备独立像素、DPR

设备像素

device pixel(s)，简称dp(s)，又称物理像素。我们把一台设备的显示器，看似一个图片的话，它要成像，不还是由一个个最小单位“点”组合成。那这种“点”（实际上是机器的发光点，是物理机件），就是设备像素。设备像素在机器生产时就确定好了，是固定的，不能改变的。

设备独立像素

device independt pixel(s)，简称dip(s)，又称逻辑像素。首先我们要知道，为啥要出现这么一个概念，身为前端工程师的你，常写css对吧，css里常写px单位吧。css里这些px值，就是指的是设备独立像素。

在没出现视网膜屏幕前，其实并没有设备像素和设备独立像素的区分，因为他们都是一样的。你在css里写多少px，就是占用了设备像素多少个像素点。但是当出现了视网膜，甚至更高PPI值的屏幕后，屏幕上分布的像素点越来越多，如果你仍然用css的1px来表示设备上的1px物理像素点，那么在一个低ppi值的屏幕上和高ppi值的屏幕上，你编写的同样一个css里的px值，在两个屏幕上显示就很大差别了，如在低ppi屏上正常显示，另一个就会十分小。为了解决这个问题，就区分出两个概念了。

设备独立像素，就是把组成设备显示的像素点重新编排，这个编排结果符合开发人员认知上的px情况，而不是设备真实的物理像素。就是在设备像素上抽象了一层，以固定数量的设备像素来表示一个设备独立像素，重新构成设备显示的像素点。
因此，我们写css时的px值，就是基于这个设备独立像素上进行的。

至于要以多少个设备像素组成一个设备独立像素，还引入了一个“设备像素比（Device Pixel Ratio），简称DPR的概念来解释了。

设备像素比（DPR）

记住该公式：

DPR = DP / DIP， 即，设备像素比 = 设备像素 / 设备独立像素

为啥要引入该概念呢？ 他主要是告诉设备显示内容时，1设备独立像素应该包含多少个设备像素，或者说，多少个设备像素显示成1个设备独立像素（即显示成你css中写的那个px值）。

如DPR为2，即1设备独立像素应该包含2个设备像素。

这样的话，这就符合我们编写css的逻辑了（又名逻辑像素的缘由？），我们要求浏览器显示1px宽的内容，因此不论在低ppi设备上还是高ppi设备上，它还是显示成1px（你用开发者工具审查元素看看他的px值，不论在什么设备都是1px）。但是实际上这个1px的所含的设备像素是不一样的。

当然DPR并不是开发者所能控制的，是设备生厂商就决定了的。DPR和PPI有什么关系呢？他们之间没有很明确的计算关系，毕竟是人为决定的，他们就把一个DPR值对应着某个范围的PPI。即生厂商告诉业界人士，ppi达到多少是高清屏，此时对应的dpr是多少。

其实说白了，就是这个DPR比例，设备会根据它来协调设备独立像素与设备像素的比例关系，让每个设备都显示一样的设备独立像素，从而达到我们css上统一认知的px值。