場景：
人物：前端實(shí)習(xí)生「阿樹」與 切圖工程師「玉鳳」
事件：設(shè)計(jì)師出設(shè)計(jì)稿，前端實(shí)現(xiàn)頁面
玉鳳：樹，設(shè)計(jì)稿發(fā)給你啦，差那么點(diǎn)像素褪迟，就叼死你┏( ￣へ￣)=?
阿樹：(>_<)毛問題噶啦~
阿樹：哇靠，為啥你給的設(shè)計(jì)稿是640px寬 毅往，iPhone 5不是320px寬嗎牵咙？？攀唯？
玉鳳：A pixel is not a pixel is not a pixel, you know ?
阿樹：(#‵′)洁桌，I know Google。侯嘀。另凌。
為什么會(huì)出現(xiàn)以上的情況谱轨，難道他們當(dāng)中一位出錯(cuò)了，擺了這樣的烏龍吠谢？
事實(shí)上土童，他們都是對的，只是談的不是同一個(gè)「像素」工坊。
此像素非彼像素
設(shè)備像素(device pixel):
設(shè)備像素設(shè)是物理概念献汗，指的是設(shè)備中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px王污。
CSS像素(css pixel):
CSS像素是Web編程的概念罢吃，指的是CSS樣式代碼中使用的邏輯像素。
在CSS規(guī)范中昭齐，長度單位可以分為兩類尿招，絕對(absolute)單位以及相對(relative)單位。px是一個(gè)相對單位阱驾，相對的是設(shè)備像素(device pixel)就谜。
比如iPhone 5使用的是Retina視網(wǎng)膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel里覆，所以設(shè)備像素?cái)?shù)為640 x 1136px丧荐，而CSS邏輯像素?cái)?shù)為320 x 568px。
設(shè)備像素與CSS像素之間的換算是如何產(chǎn)生的呢喧枷？
這就需要要談到每英寸像素(pixel per inch)和設(shè)備像素比(device pixel ratio)篮奄。
每英寸像素(pixel per inch)：
ppi，表示每英寸所擁有的像素(pixel)數(shù)目割去，數(shù)值越高，代表顯示屏能夠以越高的密度顯示圖像昼丑。ppi的計(jì)算方式可以參考維基百科每英寸像素
設(shè)備像素比(device pixel ratio)：
以上計(jì)算出ppi是為了得到密度分界呻逆，獲得默認(rèn)縮放比例，即設(shè)備像素比菩帝。
由上圖可知咖城，ppi在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度呼奢，240-320被歸為高密度宜雀，320以上被歸為超高密度（Apple給了它一個(gè)高大上的名字——Retina）。
獲得設(shè)備像素比后握础，便可得知設(shè)備像素與CSS像素之間的比例辐董。當(dāng)這個(gè)比率為1:1時(shí)，使用1個(gè)設(shè)備像素顯示1個(gè)CSS像素禀综。當(dāng)這個(gè)比率為2:1時(shí)简烘，使用4個(gè)設(shè)備像素顯示1個(gè)CSS像素苔严，當(dāng)這個(gè)比率為3:1時(shí)，使用9（3*3）個(gè)設(shè)備像素顯示1個(gè)CSS像素孤澎。
想要了解主流移動(dòng)設(shè)備的設(shè)備像素比(device pixel ratio)可以參考以下兩個(gè)網(wǎng)站：
http://screensiz.es/
http://www.devicepixelratio.com/
最后關(guān)于設(shè)計(jì)師和前端工程師之間如何協(xié)同：
一般由設(shè)計(jì)師按照設(shè)備像素(device pixel)為單位制作設(shè)計(jì)稿届氢。
前端工程師，參照相關(guān)的設(shè)備像素比(device pixel ratio)覆旭，進(jìn)行換算以及編碼退子。
參考：
「1」:A pixel is not a pixel is not a pixel
「2」:像素密度的危機(jī)
「3」:移動(dòng)端webapp開發(fā)必備知識
