CSS像素、物理像素、邏輯像素、設備像素比、PPI、Viewport

 

參照整理自：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來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。