设备像素，设备独立像素，CSS像素

之前学了移动端的开发对设备像素、设备独立像素、CSS像素弄得不太清楚，所以趁周末的时间查了一下，稍加整理

一些概念

在进行具体的分析之前，首先得知道下面这些关键性基本概念。

CSS像素

CSS像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的CSS像素单位，是抽象的，而不是实际存在的。

设备像素（physical pixel）

设备像素又称物理像素，一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素（density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

在一定的条件下两者它们两者是可以相等的，比如：在PC端浏览器默认情况下（100%，即页面没被缩放），一个物理像素 = 一个设备独立像素。而在移动端可就不一样的，这两个值很多时候是不相等的。这就用到了设备像素比（devicepixelratio）：

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 设备像素/设备独立像素

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。

在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。这样在同样的大小的屏幕尺寸下dpr越大的屏幕上显示的css像素就越多，因此而越清晰。

像素密度（pixel density）

简称是（ppi）翻译下就是每英寸内有多少个像素点，这个像素点指的是设备像素点（物理像素）。PPI的值越高，画质越好，也就是越细腻。

 

像素密度与像素比之间的关系

 

虽然设备像素密度值越高，即每英寸中所显示像素数越多，设备屏幕中图像越清晰。但是设备像素密度值与设备像素比之间并没有直接关系。