像素，css像素，物理像素，設備獨立像素，分辨率大亂鬥

本文主要闡述移動端佈局中常遇到的一些基本概念，這些概念也適用於PC端，這些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，設備獨立像素（devicedependent pixel）

像素

像素是圖像顯示的基本單位，同時像素是一個抽象概念，是一個相對單位

PPI

PPI全稱：pixel per inch，也就是每英寸像素值，更確切的說法應該是，像素密度，也就是單位物理面積內擁有像素值的狀況

假設咱們有上面這幅圖，大小都同樣，好比是1 * 1大小，可是物理面積內的PPI分別爲1，2，5，10，20，50，100。從圖中很明顯的看到，隨着PPI的增大，像素數愈來愈多，圖像也就愈來愈清晰，咱們的像素的長度同時也變爲了，1/1，1/2，1/5，1/10，1/20，1/50，1/100。能夠得知，像素在不一樣的ppi下面都不一樣，討論像素的大小也就沒有意義了。

分辨率

分辨率泛指顯示系統對細節的分辨能力，能顯示圖像都叫顯示系統，好比顯示器，投影儀，照片。
分辨率經常使用的單位有：dpi（點每英寸），lpi（線每英寸），和ppi（像素每英寸）。從單位來看，分辨率是一個比值，與物理單位的比值。因此，當有人說這個屏幕分辨率是640*1320，你要留個心，問問單位是ppi？dpi？lpi？

Retina 顯示屏

retina顯示屏不只僅是屏幕的革新，對於咱們深入理解各類單位其實理解有一個很大的幫助，咱們先來由淺入深的分析一下什麼是retina顯示屏，它提出的概念是什麼？
retina採用的技術是，將更多的像素點壓縮在一塊屏幕裏，從而達到更高的分辨率並提升屏幕顯示的細膩程度，咱們來看一下未使用retina屏的iPhone3GS和率先使用的iPhone 4

iphone 3GS

iphone 4

兩代 iPhone 的物理尺寸（屏幕寬高有多少英寸）是同樣的，從上圖能夠看出，iphone 4 的顯示效果要明顯好於 iphone 3GS，雖然 iPhone 4 分辨率提升了，但它不一樣於普通的電腦顯示器那樣爲了顯示更多的內容，而是提高顯示相同內容時的畫面精細程度。這種提高方式是靠提高單位面積屏幕的像素數量，即像素密度來提高分辨率，這樣作的主要目的是爲了提升屏幕顯示畫面的精細程度。以第三代 MacBook Pro with Retina Display 爲例， 工做時顯卡渲染出的 2880x1880 個像素每四個一組，輸出原來屏幕的一個像素顯示的大小區域內的圖像。這樣一來，用戶所看到的圖標與文字的大小與原來的 1440x900 分辨率顯示屏相同，但精細度是原來的 4 倍。

---

注意：在桌面顯示器中，咱們調整了顯示分辨率，好比從 800 * 600 調整到 1024 * 768 時，屏幕的文字圖標會變小，顯示的內容更多了。但 Retina 顯示方式不會產生這樣的問題，或者說， Retina 顯示技術解決的是顯示畫面精細程度的問題，而不是解決顯示內容容量的問題。這個怎麼理解呢？就是說，讓咱們看下一個設備像素的概念

設備獨立像素ddp

爲何是 「每四個一組」？並且要讓這四個一組來顯示 「原來屏幕的一個像素」？這大概就是 Retina 顯示技術的一種表現吧。而這 「每四個一組」 的 「大像素」，能夠被稱做 「設備獨立像素」， device independent pixel ，或者 density-independentpixel ，它能夠是系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素，而後由相關係統轉換爲物理像素。

「設備獨立像素」 也有人稱爲 「CSS 像素」，一種形象的說法，更傾向於代表與 CSS 中尺寸的對應。

設備獨立像素與物理像素的對應關係，能夠這樣看：

咱們再retina顯示屏處挖了一個坑，如今咱們要填一下。爲何桌面顯示器放大分辨率就顯示的內容更多呢？而retina內容不變，可是變爲更加細膩？這就是設備獨立像素的影響。retina的設備獨立像素是固定的，當咱們增長像素點時，讓更多的像素點渲染一個設備獨立像素所在區域，這樣必然時更細膩的，可是桌面顯示器，一個設備獨立像素佔一個坑，隨着分辨率提升，像素點增長，並不會提高獨立像素所包含的像素點，而是隨着像素點增長，獨立像素也愈來愈多，一個像素點對應一個獨立像素，這樣就顯示的內容就更加多了

物理像素

設備能控制顯示的最小單位，咱們能夠把這些像素看做成顯示器上一個個的點。
咱們在設備獨立像素中提到的，爲何retina是「每四個一組」，這裏的四個就表示物理像素，組成的這一組就叫設備獨立像素。這個設備獨立像素很有咱們前端CSS像素的味道

css像素

做爲 Web 開發者，咱們接觸的更多的是用於控制元素樣式的樣式單位像素。這裏的像素咱們稱之爲 CSS 像素。

CSS 像素有什麼特別的地方？咱們能夠借用 quirksmode 中的這個例子：

假設咱們用 PC 瀏覽器打開一個頁面，瀏覽器此時的寬度爲 800px，頁面上同時有一個 400px 寬的塊級元素容器。很明顯此時塊狀容器應該佔頁面的一半。

但若是咱們把頁面放大（經過 「Ctrl 鍵」 加上 「+ 號鍵」），放大爲 200%，也就是原來的兩倍。此時塊狀容器則橫向佔滿了整個瀏覽器。

弔詭的是此時咱們既沒有調整瀏覽器窗口大小，也沒有改變塊狀元素的 css 寬度，可是它看上去卻變大了一倍——這是由於咱們把 CSS 像素放大爲了原來的兩倍。

CSS 像素與屏幕像素 1：1 一樣大小時：

CSS 像素 (黑色邊框) 開始被拉伸，此時 1 個 CSS 像素大於 1 個屏幕像素

也就是說默認狀況下一個 CSS 像素應該是等於一個物理像素的寬度的，可是瀏覽器的放大操做讓一個 CSS 像素等於了兩個物理像素寬度。在後面你會看到更復雜的狀況，在高 PPI 的設備上，CSS 像素甚至在默認狀態下就至關於多個物理像素的尺寸，換句話說，也就是至關於一個設備獨立像素。

從上面的例子能夠看出，CSS 像素歷來都只是一個相對值。

設備像素比（DevicePixelRatio）

設備像素比 = 設備物理像素 / 設備獨立像素

設備像素比在 js 中能夠經過 devicePixelRatio 的參數取得（須要頁面的 viewport 設置爲 content=」width=device-width」）

iPhone 4 的設備像素比爲 2，線長（橫向、縱向、對角線）上的物理像素數與設備獨立像素數的對應關係即爲 2。

根據這個對應關係，通常能夠經過屏幕的物理分辨率和設備像素比肯定設備獨立像素數。

那麼在咱們作移動端網站時，將 viewport 設置了 content=」width=device-width」，設備獨立像素也就等於 CSS 像素。

硬核總結：

我以一個移動端常見的問題來將上面的名詞進行一個串聯。咱們部門因爲只作小米瀏覽器的開發，因此適配對於咱們來說其實並非很複雜，由於咱們的屏幕dpr主要是2/2.75/3，而咱們的設計師通常設計稿也是依據iPhone 6s進行設計，因此我只分析一下dpr爲3這種狀況。咱們前端拿到設計稿的時候，切圖保存要作的第一件事，就是將切圖設置爲3的倍數，好比212*112，咱們就手動微調爲213*114，這是爲何呢？由於咱們移動端須要的圖片還得原圖除以3，也就是圖片須要是71*38。
咱們上面文章有講過，其實咱們只須要了解物理像素，設備獨立像素，css像素就能解決這個問題。其中物理像素和設備獨立像素咱們沒法控制，這是人家設備已經設定好的。咱們用小米5X舉例，屏幕像素（物理像素）爲：1080*1920，設備獨立像素爲：360*640，也就是說，一個設備獨立像素就包含3*3個物理像素，同時咱們能得出：dpr = 1080*1920 / 360*630 = 3。咱們css像素其實就等於一個設備獨立像素，可是咱們設計師做圖時，座標系時1080*1920並非標準的360*640，這樣咱們就須要將設計師的圖/3，獲得的就是移動端正確的大小。其實，無論你分辨率有多高，對於普通用戶來說，分辨率，物理像素有多少是最直觀的評價標準。而咱們前端工程師，關注的背後設備獨立像素是多少，由於咱們佈局用的是設備獨立像素而不是物理像素做爲參考。因此，屏幕的分辨率是已知的，咱們經過js的window.devicePixelRatio知道dpr是多少，這樣就能知道設備獨立像素的規格，從而設置咱們的css像素與設備獨立像素一致，這樣咱們前端就能根據進行合適的切圖，還原設計稿！