前端開發中像素的概念

前端開發中像素的概念

最近在公司實習,第一次正式接觸到設計師的設計稿.我相信不少剛涉及移動端設計與開發的同窗基本上會在前端開發中的像素問題上糾結好久，因此寫下這篇筆記，便於本身往後翻閱。若是有啥理解上的錯誤，歡迎你們指正~

何爲像素

咱們看到所顯示在屏幕上的圖像,實際上都是由很是多的像素點所組成。各個像素點經過發出不一樣顏色的光來呈現屏幕的色彩。

下面介紹一些和像素相關的概念

設備像素(物理像素)

它是物理上的概念，隨着設備生產出來就已經被肯定了。例如iPhone5的分辨率是640x1136px,表明屏幕由640行,1136列像素點組成。

小知識:屏幕廣泛採用RGB色域(紅、綠、藍三個子像素構成),而印刷行業廣泛使用CMYK色域(青、品紅、黃和黑)

CSS像素

CSS像素是web編程的概念,是相對的而不是絕對的單位，由於日常電腦屏幕1px對應了1px物理像素，因此感受不到二者的區別，會讓你誤覺得CSS裏的1px就是實際屏幕像素

事實上只有zoom 100%的狀況下,1個CSS像素纔會等於1個設備像素

設備像素（深藍色背景）和CSS像素（半透明前景）

當用戶進行縮小操做的時候:能夠看到,一個設備像素覆蓋了多個CSS像素

當用戶進行放大操做的時候:能夠看到一個CSS像素覆蓋了多個設備像素

小結:用戶的縮放比會影響單位CSS像素點對應的實際物理像素的多少,看到這裏，你就應該知道，CSS像素只是一個相對單位，與物理像素並不老是等價的

此像素非彼像素

正如這篇文章的前端工程師須要明白的「像素」開頭中的場景，這簡直是跟我剛開始實習的時候場景如出一轍。

阿樹：哇靠，爲啥你給的設計稿是640px寬 ，iPhone 5不是320px寬嗎？？？

玉鳳：A pixel is not a pixel is not a pixel, you know ?

事實上，他們都是對的，只是談到的不是同一個「像素」。在上一章節中咱們介紹了,CSS像素並不總等於物理像素。

咱們知道,iPhone 3GS的屏幕和iPhone 4/4s都是3.5英寸的。過去iPhone 3GS的時候,和平時電腦屏幕同樣,在縮放比爲100%的狀況下,1px CSS像素對應着1px物理像素。開發者在開發網頁的時候只須要寫上CSS像素width:320px,height:480px。可是面對一樣屏幕尺寸的iPhone4/4s,分辨率提高到了640x960，整整比3GS的分辨率大了一倍。在相同的屏幕尺寸下塞入更多的像素點，這須要引入另外一個重要的概念：

像素密度(PPI,Pixels Per Inch)

像素密度，準確的說是每平方英寸的面積上排列的像素點數量。1英寸是一個固定長度，等於2.54釐米。像素密度越高，表明屏幕顯示效果越精細。

看到這裏可能你會困惑，若是像素密度提升了一倍的話，那麼本來顯示正常的網頁豈不是變得很是的小？

好比在分辨率爲320x480的iPhone 3GS上，要畫一條1英寸的線條，假設須要163像素,即CSS像素設成 163 像素便可；可是在分辨率爲 640×960 的 iPhone4/4s 上，163 個 CSS 像素所在手機表示實際長度只有 iPhone3GS 的一半，即 0.5 英寸。若是照這種方式顯示，3GS 上剛恰好的效果，在 4/4s 上就會小到根本看不清了。

可是在現實中並無發生這種狀況,由於:

也就是說,爲了不由於分辨率成倍提升形成的問題(高分辨率屏看網頁看不清楚),Retina屏幕將2x2的像素當作1個像素來使用。閱覽網頁的時候，iPhone 4/4S與3GS是同樣的顯示，可是畫質卻更加細膩了。

邏輯像素(dp,pt)

爲了抹去高密度分辨率屏幕(高清屏)所帶來的適配問題,iOS與Android兩個平臺分別提出了pt（point）與dp(device-independent pixel)兩個單位。他們的名稱不同，可是內涵是同樣的。下面咱們以iPhone爲例

例如將4/4s的邏輯像素設定爲320x480pt（實際像素:640x960px）,以物理屏幕左上角爲原點,橫向X軸320pt,縱向Y軸480pt。因此PPI越高，1pt的所覆蓋的物理像素就越多。

設備像素比（DPR，Device Pixel Ratio）

以前咱們已經介紹了物理像素與邏輯像素的概念,就能夠很容易推導出設備像素比的公式了

DRP = 物理像素/dp或pt

1倍：1pt=1dp=1px（iPhone 3GS）
2倍：1pt=1dp=2px（iPhone 4s/5/6）
3倍：1pt=1dp=3px（iPhone 6 plus）

總結

1個CSS像素至關於多少個物理像素,取決於:

• 頁面縮放比

• 屏幕密度

因此設計師給的是640px寬的設計稿是根據設備像素(device pixel,物理像素)爲單位制做的設計稿;而前端工程師參照相關的設備像素比來進行換算

好比根據iPhone5出稿的設計稿的中有一個width:100px,height:200px的按鈕
那麼前端工程師在編碼web頁面時應該寫width:50px,height:100px.

他們之間的換算比例是根據設備像素比來計算的

參考文章

前端工程師須要明白的「像素」

移動端尺寸基礎知識

(全解析)屏幕尺寸，分辨率，像素，PPI之間到底什麼關係？

前端：移動開發 - 像素、viewport

移動端適配方案(上)