場景： 人物：前端實習生「阿樹」與 切圖工程師「玉鳳」 事件：設計師出設計稿，前端實現頁面 玉鳳：樹，設計稿發給你啦，差那麼點畫素，就叼死你┏( ￣へ￣)=☞ 阿樹：~(>_<)~毛問題噶啦~ 阿樹：哇靠，為啥你給的設計稿是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。
裝置畫素與CSS畫素之間的換算是如何產生的呢？ 這就需要要談到每英寸畫素(pixel per inch)和裝置畫素比(device pixel ratio)。 每英寸畫素(pixel per inch)： ppi，表示每英寸所擁有的畫素(pixel)數目，數值越高，代表螢幕能夠以越高的密度顯示影象。ppi的計算方式可以參考維基百科每英寸畫素 裝置畫素比(device pixel ratio)： 以上計算出ppi是為了得到密度分界，獲得預設縮放比例，即裝置畫素比。
由上圖可知，ppi在120-160之間的手機被歸為低密度手機，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個高大上的名字——Retina）。
獲得裝置畫素比後，便可得知裝置畫素與CSS畫素之間的比例。當這個比率為1:1時，使用1個裝置畫素顯示1個CSS畫素。當這個比率為2:1時，使用4個裝置畫素顯示1個CSS畫素，當這個比率為3:1時，使用9（3*3）個裝置畫素顯示1個CSS畫素。
想要了解主流移動裝置的裝置畫素比(device pixel ratio)可以參考以下兩個網站： screensiz.es/ www.devicepixelratio.com/ 最後關於設計師和前端工程師之間如何協同： 一般由設計師按照裝置畫素(device pixel)為單位制作設計稿。 前端工程師，參照相關的裝置畫素比(device pixel ratio)，進行換算以及編碼。