沐鳴平台網站_前端工程師需要明白的「像素」

場景:

人物:前端實習生「阿樹」與 切圖工程師「玉鳳」
事件:設計師出設計稿,前端實現頁面

玉鳳:樹,設計稿發給你啦,差那麼點像素,就叼死你┏(  ̄へ ̄)=
阿樹:~(>_<)~毛問題噶啦~
阿樹:哇靠,為啥你給的設計稿是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)可以參考以下兩個網站:
http://screensiz.es/
http://www.devicepixelratio.com/

最後關於設計師和前端工程師之間如何協同
一般由設計師按照設備像素(device pixel)為單位製作設計稿。
前端工程師,參照相關的設備像素比(device pixel ratio),進行換算以及編碼。

參考:
「1」:A pixel is not a pixel is not a pixel
「2」:像素密度的危機
「3」:移動端webapp開發必備知識