# 跨端開發必備概念
作為前端來說，一定要了解一些多端開發的解決方案，在進行更進一步深入學習和研究各種相關問題之前，有些概念是必須研究透徹的，這將會是以后開發和適配的基石。
## 說在前面的話
在前端開發之前，視覺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)，肉眼看上去雖然圖片不會模糊，但是會覺得圖片缺少一些銳利度，或者是有點色差(但還是可以接受的)。
用一張圖片來表示：
