设备像素，设备独立像素，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的值越高，画质越好，也就是越细腻。

 

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

 

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