从像素说起（一）CSS中的分辨率，像素(dpi,ppi,物理像素，独立像素，参考像素)

翻译与总结关于CSS的像素，devicePixedRatio与视窗的概念

1.像素本身的概念，CSS中的像素（参考像素）

2.物理像素与逻辑像素，DevicePixedRatio

--2.1example: 选择不同质量的位图以适应不同分辨率的屏幕

3.移动端三类视窗的概念，how to get ideal viewport

--3.example: meta中固定视窗宽度的方法

1.像素，参考像素，逻辑像素，物理像素，分辨率---像素到底是绝对单位还是相对单位？

wiki上对像素的定义是，由一个数字序列（如RGB）表示的图像中的一个最小完整采样/最小单位。因此，需要让图片尺寸以px为单位时，需要用固定的分辨率换算，如一个10inch*10inch，分辨率为72ppi的 的bitmap，就可以说它是720*720px的（这里的720*720又成了分辨率，即横纵方向上像素总个数）。也可反过来将像素在固定的ppi下换算成物理单位，如1024像素在300像素/英寸dpi下，每英寸≈0.003333像素，所以1024像素=3.413英寸=8.67厘米。

以上说法当然正确，常用PS等绘图软件的同学应该都知道。但在CSS布局中，你会惊喜地发现，分辨率不是那个分辨率，像素也不是那个像素了。。那么，从头说起。

分辨率：分为两类，图像分辨率和输出分辨率。图像分辨率即上文所说，以ppi（px per inch）为单位。输出分辨率，是指在打印/输出时横向和纵向两个方向上每英寸最多能够打印的点数，通常以“点/英寸”即dpi（dot per inch）表示。一般指打印机的最大分辨率。输出分辨率对显示器来说也就是解析度，电脑显示器的解析度约为72dpi，以一部15寸的电脑显示器为例，可视面积的水平长度大约为11.2寸，如果显示模式是800×600，那么解析度就是 800/11.2=71.4。如果是17寸电脑显示器，以1024×768的显示模式来看，解析度就变成1024/12.8=80了。对手机屏幕，解析度常见取值 120，160，240。160dpi为default.

这里有两个问题，1，dpi=ppi吗？即这个点的大小就是一个像素吗？

参考回答：from14楼江湖人称某二代2016-01-17 05:58发表于http://blog.csdn.net/dinko321/article/details/7992776

在位图图象中，点组成线，线组成面，所以可以将一幅位图看成是由无数个点组成，组成图象的一个点就是一个象素，像素是构成位图图象的最小单位，它的形态是小方点———这只是一种理解的方式，dot可以是原点可以是方点，原则上它只是一个最小单位而没有具体的形态（见插图1-1），dot本身就是人为规定的。在安卓领域，可以把dpi想象成谷歌的工程师人为的把手机屏幕的物理尺寸分成每英寸多少个点，而手机屏幕是有ppi的，每一个p的物理尺寸也就算的出来。而1d是他们人为规定的，也能算出1d的物理尺寸，这样两者一比较就知道1d等于多少p。谷歌把160ppi的屏幕规定为160dpi，这样1d=1p，也就是说1d的物理长度为1/160（英寸），所以1dp=1px，这也就是为什么很多公式都一160这个数值为基准了。换到320ppi的屏幕，也就说1px物理长度为1/320（英寸），若想达到1/160英寸的长度看得用两个像素点来显示。

即，决定图像输出质量的是图像的输出分辨率，以dpi为单位，两者有联系但并不总是相等的。

2，这里的显示模式800×600是啥？

参考回答：图像分辨率也可以表示成每一个方向上的总像素数量，就是横纵2个方向的像素点的数量，常见取值 480X800 ，320X480，上文中1024×768和800×600被叫做显示模式，其实就是分辨率。手机端这种概念较常见。

说完了分辨率，才能开始说像素。由CSS中给出的官方定义，px其实并不是一种相对长度存在，而是绝对长度。之前被作为相对单位存在（参见下文note）。参见https://www.w3.org/TR/2016/CR-css-values-3-20160929/#absolute-lengths

简单粗暴谷歌翻译之：

CSS中的绝对长度单位相对于彼此是一个固定值，当输出环境已知时尤其适用。绝对单位由物理单位（in，cm，mm，pt，pc，q）和视角单位组成（px）。所有这些absolute length units 都是兼容的，且px为它们的规范单位。

对于打印介质和类似的高分辨率设备，anchor unit应为标准物理单位（英寸，厘米等）之一。对于较低分辨率的设备和观看距离unusual的设备，推荐像素单位，并尽量选择近似于参考像素的设备像素的整数--- 这里引出，什么是reference pixel?device pixel？

reference pixel：参考像素

The reference pixel is the visual angle of one pixel on a device with a pixel density （分辨率，此处说是pixel density，但与density还有区别，density是一个ratio，DPI / (160像素/英寸)  后得到的值，常见1.5，1.0）of 96dpi and a distance from the reader of an arm’s length.For a nominal arm’s length of 28 inches,the visual angle is therefore about 0.0213 degrees.For reading at arm’s length,1px thus corresponds to about 0.26 mm (1/96 inch).

从一臂之遥看解析度为96DPI的设备上的一个像素，此时的visual angle（说视角有点奇怪，可以映射为像素点的大小）。若臂长28inch为标准，则该视角约为0.0213°。此时1PX对应1/96英寸，即0.26mm。结合上文，即参考像素是在96dpi下换算出来的具有固定物理长度的量。

Note:像素单位和物理单位的定义不同于以前的CSS版本。在CSS的先前版本中，像素和物理单位不通过固定比率相关：物理unit总是与其物理测量相关，而像素单位会vary以接近参考像素。（这个更改是因为太多现有内容依赖于96dpi的假设，打破这一假设破坏了内容。）

而device pixel，可以参见上文关于打印机和屏幕分辨率的内容，个人理解是要根据上下文来判断，当device pixels为复数时更可能指的是分辨率，单个pixel其实并无意义，或者参照reference pixel，把解析度96dpi换成该设备的实际DPI。

下图（图1-1）展示了设备的分辨率对像素单元的影响：1×1像素的区域在低分辨率设备（例如典型的计算机显示器）中被单个点覆盖，同一区域在更高分辨率的设备（例如打印机）中被16个dots覆盖。因此相同的近似观看距离下，高分辨率设备拥有更多的设备像素（点）来覆盖上的1px乘1px区域。

图1-1      pixel in screen      from w3c.org

fig 1-2    from w3c.org 可见观察距离对参考像素大小的影响：71厘米（28英寸）的阅读距离导致0.26毫米的参考像素，而3.5米（12英尺）的阅读距离导致参考像素为1.3mm。

表1  px作为absolute length units与常用physical 换算关系

 name equivalence cmcentimeters 1cm = 96px/2.54 mmmillimeters 1mm = 1/10th of 1cm Qquarter-millimeters 1q = 1/40th of 1cm ininches 1in = 2.54cm = 96px pcpicas 1pc = 1/6th of 1in ptpoints 1pt = 1/72th of 1in pxpixels 1px = 1/96th of 1in

----

以上已经出现了不少概念，可以引出devicePixedRatio的概念，请参见（二）