參照整理自：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