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可以通過 或者 查詢，我們下面來說一說具體的使用方法。
當裝置畫素比為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，這樣我們在裝置上對於的直觀感受才是和標準螢幕相同。
而最後說一下，我們在移動端頁面開發中嘗試用到元資訊配置，新增這段**後我們發現之前縮放的頁面被放大了
其實它的含義就是將視口設定為：css畫素=裝置畫素，即我們在頁面中設定的1個css畫素大小就等價於1個裝置畫素大小，在pc上看不到效果，但在移動端頁面開發中我們就能看到很大的差異。
裝置畫素，解析度 ，裝置獨立畫素，CSS畫素
以為為個人理解 畫素 畫素就是組成影象的最基本單元，可以理解為小點。不知道大家有沒有這樣的情況，就是拿放大鏡看顯示屏或電視的時候可以看到乙個乙個的小方框，影象 是由這樣的小點組成的，也就是畫素。裝置畫素 就是裝置的畫素。比如手機畫素，相機畫素，顯示屏畫素等。解析度 通俗講就是分辨影象的程度。畫素越高...
px畫素如何轉為dip裝置獨立畫素裝置獨立像
最近在做適配，又去研究了下轉化為題 目前主流的為wvga，而很多老的裝置為hvga甚至低端的qvga，對於相容性來說使用dip無非是比較方便的，由於他和解析度無關和螢幕的密度大小有關，所以推薦使用。px int dip density 0.5f 這裡android開發網提示大家很多獲取density...
裝置畫素比devicePixelRatio簡單介紹
本文所說devicepixelratio其實指的是window.devicepixelratio,被所有webkit瀏覽器以及opera所支援，隨著顯示器的發展，這個屬性也慢慢登上了前端技術的舞台。本文內容大部分屬於翻譯性質內容，因此，會不那麼通俗易懂。不過，你是做手機開發的，或是有意向的，本文的內...