本文主要闡述移動端佈局中常遇到的一些基本概念，這些概念也適用於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 3GSiphone 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畫素與裝置獨立畫素一致，這樣我們前端就能根據進行合適的切圖，還原設計稿！