場景：

人物：前端實(shí)習(xí)生「阿樹」與 切圖工程師「玉鳳」
事件：設(shè)計師出設(shè)計稿，前端實(shí)現(xiàn)頁面

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

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

此像素非彼像素

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

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

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

retina-pixel.png

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

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

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

device-pixel-ratio.jpg

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

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

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

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