# 跨端開發必備概念
作為前端來說,一定要了解一些多端開發的解決方案,在進行更進一步深入學習和研究各種相關問題之前,有些概念是必須研究透徹的,這將會是以后開發和適配的基石。
## 說在前面的話
在前端開發之前,視覺MM會給我們一個psd文件,稱之為視覺稿。對于移動端開發而言,為了做到頁面高清的效果,視覺稿的規范往往會遵循以下兩點:
1. 首先,選取一款手機的屏幕寬高作為基準,以前是iphone4的320x480,現在更多使用的是iphone6的375x667。
2. 對于retina屏幕(如: dpr=2),為了達到高清效果,視覺稿的畫布大小會是基準的2倍,也就是說像素點個數是原來的4倍(對iphone6而言:原先的375×667,就會變成750×1334)。
那么問題來了,對于dpr=2的手機,為什么畫布大小×2,就可以解決高清問題?對于2倍大小的視覺稿,在具體的css編碼中如何還原每一個區塊的真實寬高(也就是布局問題)?
帶著問題,往下看...
## 必備概念
在進行具體的分析之前,首先得知道下面這些關鍵性基本概念(術語)。
### 物理像素(physical pixel)
一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元,在操作系統的調度下,每一個設備像素都有自己的顏色值和亮度值。
### 設備獨立像素(density-independent pixel)
設備獨立像素,也叫作密度無關像素,可以認為是計算機坐標系統中的一個點,這個點代表一個可以由程序使用的虛擬像素(例如css像素),然后由香港系統轉換為物理像素。
所以說,物理像素和設備獨立像素之間存在著一定的對應關系,這就是我們接下來要說的設備像素比。
### 設備像素比(device pixel ratio)
設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關系,它的值可以通過如下公式得到:
設備像素比=物理像素 / 設備獨立像素; /*在某一方向上,x方向或者y方向*/
dpr=pp/dp
在js中,我們可以通過window.devicePixelRatio獲取當前設備的dpr。
在css中,可以通過-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio進行媒體查詢,對不同dpr的設備,做一些樣式適配,這里我們只針對webkit內核的瀏覽器和webview。
---
綜合上面幾個概念,我們以iphone6為例:
1. 設備寬高為375×667,可以理解為設備獨立像素(或css像素)。
2. dpr為2,根據上面的計算公式,其物理像素就應該×2,為750×1334。
用一張圖來表現,就是這樣:

上圖中可以看出,對于這樣的css樣式:
width: 2px;
height: 2px;
在不同的屏幕上(普通屏幕 vs retina屏幕),css像素所呈現的大小(物理尺寸)是一致的,不同的是1個css像素所對應的物理像素個數是不一致的。
在普通屏幕下,1個css像素 對應 1個物理像素(1:1)。
在retina 屏幕下,1個css像素對應 4個物理像素(1:4)。
---
### 位圖像素
一個位圖像素是柵格圖像(如:png, jpg, gif等)最小的數據單元。每一個位圖像素都包含著一些自身的顯示信息(如:顯示位置,顏色值,透明度等)。
談到這里,就得說一下,retina下圖片的展示情況?
理論上,1個位圖像素對應于1個物理像素,圖片才能得到完美清晰的展示。
在普通屏幕下是沒有問題的,但是在retina屏幕下就會出現位圖像素點不夠,從而導致圖片模糊的情況。
用一張圖來表示:

如上圖:對于dpr=2的retina屏幕而言,1個位圖像素對應于4個物理像素,由于單個位圖像素不可以再進一步分割,所以只能就近取色,從而導致圖片模糊(注意上述的幾個顏色值)。
所以,對于圖片高清問題,比較好的方案就是兩倍圖片(@2x)。
如:200×300(css pixel)img標簽,就需要提供400×600的圖片。
如此一來,位圖像素點個數就是原來的4倍,在retina屏幕下,位圖像素點個數就可以跟物理像素點個數形成 1 : 1的比例,圖片自然就清晰了(這也解釋了之前留下的一個問題,為啥視覺稿的畫布大小要×2?)。
---
這里就還有另一個問題,如果普通屏幕下,也用了兩倍圖片,會怎樣呢?
很明顯,在普通屏幕下,200×300(css pixel)img標簽,所對應的物理像素個數就是200×300個,而兩倍圖片的位圖像素個數則是200×300*4,所以就出現一個物理像素點對應4個位圖像素點,所以它的取色也只能通過一定的算法(顯示結果就是一張只有原圖像素總數四分之一,我們稱這個過程叫做downsampling),肉眼看上去雖然圖片不會模糊,但是會覺得圖片缺少一些銳利度,或者是有點色差(但還是可以接受的)。
用一張圖片來表示:
