H5前端的關於像素解釋

場景： 人物：前端實習生「阿樹」與 切圖工程師「玉鳳」 事件：設計師出設計稿，前端實現頁面 玉鳳：樹，設計稿發給你啦，差那麼點像素，就叼死你┏( ￣へ￣)=☞ 阿樹：~(>_<)~毛問題噶啦~ 阿樹：哇靠，爲啥你給的設計稿是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)，進行換算以及編碼。