从像素说起（一）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.