CSS像素、設備獨立像素、設備像素，三者聯系緊密又有很大的區別，而我們主要是在做移動端開發的時候需要更多地用到這些概念，那他們分別是指什麽呢？

概念

CSS像素（CSS Pixel）：適用於web編程，指的是我們在樣式代碼中使用到的邏輯像素，是一個抽象概念，實際並不存在

設備獨立像素（Device Independent Pixel）：與設備無關的邏輯像素，代表可以通過程序控制使用的虛擬像素，是一個總體概念，包括了CSS像素

設備像素（Device Pixel）：物理像素，設備能控制顯示的最小單位，我們常說的1920×1080像素分辨率就是用的設備像素單位

關系

因為設備獨立像素是包含了CSS像素的大類，所以我們可以直接討論設備獨立像素和設備像素之前的區別和聯系。

首先我們可以做一個總體總結：

PC端 —— 1個設備獨立像素 = 1個設備像素 （在100%，未縮放的情況下，如果縮放到200%可以說1個設備獨立像素 = 2個設備像素）

移動端 —— 根據設備不同有很大的差異，根據 ppi 不同我們可以得到不同的換算關系，標準屏幕（160ppi）下 1個設備獨立像素 = 1個設備像素

在詳細闡述之前我們先介紹兩個概念：每英寸像素點ppi 和 設備像素比dpr

ppi （pixel per inch）：表示每英寸所包含的像素點數目，數值越高，說明屏幕能以更高密度顯示圖像

計算公式——

ppi在120-160之間的手機被歸為低密度手機，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（例如蘋果公司的Retina顯示屏）

dpr（device pixel ratio）：設備像素比，設備像素/設備獨立像素，代表設備獨立像素到設備像素的轉換關系，在JS中可以通過 window.devicePixelRatio 獲取

計算公式——

知道設備像素比之後，我們就可以將程序中使用到的CSS像素轉換為設備像素，解決同樣的圖片在不同移動終端上顯示存在差異的問題。

常見的設備dpr可以通過 http://screensiz.es/phone 或者 http://devicepixelratio.com/ 查詢，我們下面來說一說具體的使用方法。

當設備像素比為1:1時，使用1（1×1）個設備像素顯示1個CSS像素；

當設備像素比為2:1時，使用4（2×2）個設備像素顯示1個CSS像素；

當設備像素比為3:1時，使用9（3×3）個設備像素顯示1個CSS像素。

如下圖所示：

所以如果我們要在非標準屏幕上以同樣大小顯示同一張圖片時，就需要縮放圖片大小，計算公式為：

為什麽是這樣呢？就比如我們之前在CSS中設置圖片大小為100px，要在dpr為2:1（即在一個方向上2個設備像素長度代表1個CSS像素長度）的Retia屏幕上同比例顯示，就需要先放大這個圖片到2被大小，即200px，這樣我們在設備上對於圖片的直觀感受才是和標準屏幕相同。

而最後說一下，我們在移動端頁面開發中嘗試用到元信息配置<meta name="viewport" width="device-width">，添加這段代碼後我們發現之前縮放的頁面被放大了

其實它的含義就是將視口設置為：CSS像素=設備像素，即我們在頁面中設置的1個CSS像素大小就等價於1個設備像素大小，在PC上看不到效果，但在移動端頁面開發中我們就能看到很大的差異。

移動WEB開發--CSS像素、設備獨立像素、設備像素之間關系