移動WEB開發--CSS像素、裝置獨立像素、裝置像素之間關係

標籤：使用   retina   終端   gpo   web開發   長度   ret   100%   技術   

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像素、裝置獨立像素、裝置像素之間關係