# 设备像素，设备独立像素，css像素，dpr，ppi的区别
# 设备像素（物理像素）：
设备像素（device pixels），是设备屏幕的物理像素，任何设备的物理像素的数量都是固定的，其在机器生产时就确定好了，不能改变。
比如 iPhone6 的像素是750 x 1334px。
# 分辨率
分辨率（Resolution）也是一个物理概念，含义要看对谁
对于屏幕，分辨率一般表示屏幕上显示的物理像素总和。比如，我们说 iPhone6 屏幕分辨率是
750 x 1334px对于图像，概念等同于图像尺寸、图像大小、像素尺寸等等。比如，我们说
20 x 20px的 icon
严格来说，图像分辨率的单位是 ppi（每英寸像素），对于一个图片文件，其像素尺寸是一定的，可能含有来自相机的meta信息，比如分辨率200ppi（每英寸中所含有200个像素），该值只是个建议值，图片显示出来我们看到的尺寸由屏幕像素密度决定，像素密度越高，图片看起来越小
# 设备独立像素（逻辑像素）
一个设备独立像素里可能包含1个或者多个物理像素点，包含的越多则屏幕看起来越清晰
在javaScript中可以通过window.screen.width / window.screen.height 查看。
# css像素：
CSS像素（CSS Pixels）：是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
所以，1个CSS像素在不同设备上可能对应不同的物理像素数，这个比值是设备的属性（设备像素比）
在CSS规范中，长度单位可以分为绝对单位和相对单位。px是一个相对单位，相对的是设备像素。比如 iPhone6 使用的是Retina视网膜屏幕，用2x2的Device Pixel代表1x1的 CSS Pixel ，所以设备像素数为750 x 1334px，而 CSS 逻辑像素数为375 x 667px
# DPR（设备像素比）
DPR（device pixel ratio），设备像素比，代表设备独立像素到设备像素的转换关系，在JavaScript中可以通过 window.devicePixelRatio 获取
计算公式为： DPR = 设备像素 / 设备独立像素
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素
当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素
当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素
# PPI（每英寸像素）
ppi （pixel per inch），每英寸像素，表示每英寸所包含的像素点数目，更确切的说法应该是像素密度。数值越高，说明屏幕能以更高密度显示图像。
