場景：

人物：前端實習生「阿樹」與 切圖工程師「玉鳳」
事件：設計師出設計稿，前端實現頁面

玉鳳：樹，設計稿發給你啦，差那么點像素，就叼死你┏( ￣へ￣)=?
阿樹：_{(>_<)}毛問題噶啦~
阿樹：哇靠，為啥你給的設計稿是640px寬 ，iPhone 5不是320px寬嗎？？？
玉鳳：A pixel is not a pixel is not a pixel, you know ?
阿樹：(#‵′)，I know Google。。。

為什么會出現以上的情況，難道他們當中一位出錯了，擺了這樣的烏龍？
事實上，他們都是對的，只是談的不是同一個「像素」。

此像素非彼像素

設備像素(device pixel):
設備像素設是物理概念，指的是設備中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

CSS像素(css pixel):
CSS像素是Web編程的概念，指的是CSS樣式代碼中使用的邏輯像素。
在CSS規范中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。px是一個相對單位，相對的是設備像素(device pixel)。

比如iPhone 5使用的是Retina視網膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以設備像素數為640 x 1136px，而CSS邏輯像素數為320 x 568px。

retina-pixel.png

設備像素與CSS像素之間的換算是如何產生的呢？
這就需要要談到每英寸像素(pixel per inch)和設備像素比(device pixel ratio)。

每英寸像素(pixel per inch)：
ppi，表示每英寸所擁有的像素(pixel)數目，數值越高，代表顯示屏能夠以越高的密度顯示圖像。ppi的計算方式可以參考維基百科每英寸像素

設備像素比(device pixel ratio)：
以上計算出ppi是為了得到密度分界，獲得默認縮放比例，即設備像素比。

device-pixel-ratio.jpg

獲得設備像素比后，便可得知設備像素與CSS像素之間的比例。當這個比率為1:1時，使用1個設備像素顯示1個CSS像素。當這個比率為2:1時，使用4個設備像素顯示1個CSS像素，當這個比率為3:1時，使用9（3*3）個設備像素顯示1個CSS像素。

想要了解主流移動設備的設備像素比(device pixel ratio)可以參考以下兩個網站：
http://screensiz.es/
http://www.devicepixelratio.com/

最后關于設計師和前端工程師之間如何協同：
一般由設計師按照設備像素(device pixel)為單位制作設計稿。
前端工程師，參照相關的設備像素比(device pixel ratio)，進行換算以及編碼。

參考：
「1」:A pixel is not a pixel is not a pixel
「2」:像素密度的危機
「3」:移動端webapp開發必備知識