場景：
人物：前端實習生「阿樹」與 切圖工程師「玉鳳」 事件：設計師出設計稿，前端實現頁面
玉鳳：樹，設計稿發給你啦，差那麼點畫素，就叼死你┏( ￣へ￣)=☞ 阿樹：~(>_
為什麼會出現以上的情況，難道他們當中一位出錯了，擺了這樣的烏龍？ 事實上，他們都是對的，只是談的不是同乙個「畫素」。
此畫素非彼畫素
裝置畫素(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是為了得到密度分界，獲得預設縮放比例，即裝置畫素比。
獲得裝置畫素比後，便可得知裝置畫素與css畫素之間的比例。當這個比率為1:1時，使用1個裝置畫素顯示1個css畫素。當這個比率為2:1時，使用4個裝置畫素顯示1個css畫素，當這個比率為3:1時，使用9（3*3）個裝置畫素顯示1個css畫素。
想要了解主流移動裝置的裝置畫素比(device pixel ratio)可以參考以下兩個**：
最後關於設計師和前端工程師之間如何協同： 一般由設計師按照裝置畫素(device pixel)為單位製作設計稿。 前端工程師，參照相關的裝置畫素比(device pixel ratio)，進行換算以及編碼。
未來的前端工程師
作者簡介 aoto 螞蟻金服 資料體驗技術團隊 以下我說的都是個人觀點，比較巨集觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。前端工程師首先是個程式設計師，其次也是個軟體工程師，他們工作在離使用者最近的地方，負責人機互動和使用者體驗，雖然叫 前端 但其實他們的工作邊界其實已...
未來的前端工程師
同步自個人語雀 以下我說的都是個人觀點，比較巨集觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。toc 前端工程師首先是個程式設計師，其次也是個軟體工程師，他們工作在離使用者最近的地方，負責人機互動和使用者體驗，雖然叫 前端 但其實他們的工作邊界其實已經很寬了。展望未來，我想...
未來的前端工程師
作者簡介 aoto 螞蟻金服資料前端 以下我說的都是個人觀點，比較巨集觀粗淺，主要針對的是前端工程師本身，沒有深入技術和業務細節，請謹慎參考。前端工程師首先是個程式設計師，其次也是個軟體工程師，他們工作在離使用者最近的地方，負責人機互動和使用者體驗，雖然叫 前端 但其實他們的工作邊界其實已經很寬了。...