設備像素，CSS像素，設備獨立像素

1.概念

設備像素（device pixel）簡寫DP

設備像素又稱 **物理像素** ，是設備能控制顯示的最小單位，咱們能夠把它看作顯示器上的一個點。咱們常說的 1920x1080像素分辨率就是用的設備像素單位。

css像素（css pixel）

css像素是 **web編程的概念** ，它是 **抽象的** ，實際上 **不存在** 。用於邏輯上衡量像素的單位。也就是咱們作網頁時用到的css像素單位。

設備獨立像素（Device Independent Pixel）簡寫DIP

設備獨立像素也叫 密度無關像素 ，能夠認爲是計算機座標系統中的一個點，這個點表示一個能夠由程序使用並控制的虛擬像素，能夠由相關係統轉換爲物理像素。設備獨立像素是一個總體概念，包括了css像素，好比:css像素，只是在android 機中，css像素不叫 「css像素了」，而叫「設備獨立像素」。

2.關係

由於設備獨立像素是包含了css像素的大類，因此咱們這裏只討論 設備像素 和 設備獨立像素 的關係

1. PC端
   1個設備獨立像素等於1個設備像素（在100% 未縮放的狀況下），若是縮放到200%，則1個設備獨立像素等於2個設備像素
2. 移動端
   根據設備不一樣，有很大差別

在詳細闡述設備像素和獨立設備像素 的關係前咱們先了解兩個概念，ppi 和dpr

PPI 像素密度（pixel per inch）

PPI翻譯過來就是每英寸有多少個像素點(這裏的像素指的是設備像素，既物理像素)，說的直白點PPI就是**像素密度** pixel density），PPI的值越高，畫質越好，看起來更有逼格。那麼PPI是怎麼計算出來的呢，看公式

---

計算公式：

咱們不妨用上面的公式作作數學題,見下圖：

下面咱們來計算一下 iphone6 plus 的ppi;
var ppi = sqrt(1920X1920+1080X1080)/5.5; 計算結果ppi 爲 400.528576，實際上會有出入，但這不要緊。

好了咱們仍是回到上面的問題：二者（設備像素和設備獨立像素）是如何進行換算的？它們是經過設備像素比(dpr,device pixel ratio)來進行換算的。那麼什麼是設備像素比呢？

DPR (device pixel ratio) 設備像素比

1.設備像素比定義了設備像素和設備獨立像素的轉換關係(告訴你一個設備像素對應多少個獨立設備像素(既css像素))，計算式爲：

在javascript中，能夠經過window.devicePixelRatio獲取到當前設備的dpr。在css中，能夠經過-webkit-device-pixel-ratio，webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio進行媒體查詢，對不一樣dpr的設備，作一些樣式適配(這裏只針對webkit內核的瀏覽器和webview)。

2.設備像素的大小是固定的，是不可變的。而設備獨立像素是能夠被拉長或壓縮的。這個該怎麼理解呢看圖。

下面咱們來看個現實中的例子，Iphone 5s 使用的是 Retina 視網膜屏幕，什麼是Retina視網膜屏幕？PPI 值超過 300 的叫作超高密度屏幕，只是 Apple 給它換了個高大尚的名稱：Retina 視網膜屏幕而已。

在作移動頁面開發的時候，相信你常常會遇到這種狀況：在不一樣的手機上看時，裏面的圖片、文字或者線的大小會不同，有時候大小區別還很是地大。緣由就是剛纔說到的設備像素比在做怪。

你想啊，若是在普通屏即標準 PPI下一個設備光點對應一個 CSS 像素時，頁面不大不小，完美地渲染出來了。但在如今這個高逼格的年代，標準 PPI 已經不多見了。更多的是 Retina視網膜設備。而設備像素比不一樣的品牌的手機這個值也是不同的。即便是同一個品牌的手機也不同。你好比 Iphone 5s 設備像素比爲2，Iphone 6s 設備像素比爲3。至於安卓機中的設備像素比就更多了，有1.三、1.五、二、3等等。

3.設備像素和獨立設備像素的關係(實例)

已iphone6 爲例：

設備寬高爲375×667，能夠理解爲設備獨立像素(或css像素)。
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)。

4.設備像素與CSS像素之間的換算是如何產生

設備像素與CSS像素之間的換算是如何產生的呢？，這就要談到ppi 和 dpr,以上計算出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像素。