場景：
人物：前端實習生「阿樹」與 切圖工程師「玉鳳」
事件：設計師出設計稿，前端實現頁面
玉鳳：樹，設計稿發給你啦，差那麼點畫素，就叼死你┏( ￣へ￣)=☞
阿樹：~(>_
阿樹：哇靠，為啥你給的設計稿是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的計算方式可以參考維基百科每英吋畫素
獲得裝置畫素比後，便可得知裝置畫素與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)，進行換算以及編碼。
參考：「1」:a pixel is not a pixel is not a pixel
「2」:畫素密度的危機
px 物理畫素 rem rpx的關係
顯示的原理就是把要顯示的資料寫入視訊記憶體區域，然後顯示裝置讀取這些資料，驅動硬體就可以顯示了。顯示的資料是以畫素為單位的，乙個畫素只能顯示一種顏色，但是根據顯示顏色的總數不同，每個畫素佔的位數也不同。如果我想顯示黑白，那一位就可以儲存了，但如果我想顯示16種顏色，就得4位來儲存乙個顏色，這樣的乙個...
1px畫素的問題
之前有學習過這個問題，但是一時之間沒想起來。其實就是沒有徹底弄懂，不然怎麼會想不起來呢 物理畫素 裝置螢幕實際擁有的畫素點。比如iphone 6的螢幕在寬度方向有750個畫素點，高度方向有1334個畫素點，所以iphone 6 總共有750 1334個物理畫素。邏輯畫素 邏輯畫素是乙個抽象概念，是乙...
CSS3中的rem值與px之間的換算
rem好像也是乙個相對大小的值，它是相對於根元素，比如假設，我們設定html的字型大小的值為html font size 87.5 也就是14px，這是twentytwelve預設主題裡的設定 然後其他的字型就是將你要的值除以14得到的值 比如預設的twentytwelve主題大小是960px 換算...