参照整理自：https://github.com/jawil/blog/issues/21
http://www.jianshu.com/p/af6dad66e49a
px：px是一个相对单位，相对的是设备像素(device pixel) margin：2px，这里的px是逻辑像素。
ppi：每英寸多少像素数，放到显示器上说的是每英寸多少物理像素及显示器设备的点距。
dpi：每英寸多少点。 也是根据物理像素的大小来决定的。
我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。 比如手机:1080x1920px！ 1个设备像素
DPR（设备像素比） = 设备像素/CSS像素 CSS像素 =设备独立像素 = 逻辑像素
ppi:每英寸的像素点（设备像素=物理像素）
最先使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。
通过屏幕分辨率和屏幕尺寸就能计算出屏幕的像素密度
最后关于设计师和前端工程师之间如何协同：
一般由设计师按照设备像素(device pixel)为单位制作设计稿。
前端工程师，参照相关的设备像素比(device pixel ratio)，进行换算以及编码。
设备像素(device pixel):
设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。
CSS像素(css pixel):
CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。
作者：阿树
链接：http://www.jianshu.com/p/af6dad66e49a
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
原文地址：http://www.cnblogs.com/njqa/p/8001158.html