定義

畫素（pixel）是影象顯示的基本單位。在網頁中，一個畫素就是計算機能夠顯示一種特定顏色的最小區域。

當裝置尺寸相同但畫素變的更密集時，螢幕能顯示的畫面的過渡更細緻，大致像下面這樣

ppi是指螢幕上每英寸可以顯示的畫素點的數量，即螢幕畫素密度

分類

畫素可以分為裝置畫素和CSS畫素

裝置畫素（device independent pixels）： 裝置畫素也叫物理畫素，任何裝置的物理畫素是固定不變的。比如我的筆記本的解析度是1366 * 765，表示的就是寬度上最多容納1366個物理畫素點，高度上最多容納765個物理畫素點

CSS畫素（CSS pixels）：CSS畫素也叫邏輯畫素，是為web開發創造的。通常情況下，在桌面端，CSS畫素的大小和裝置畫素的大小是相等的，即一個CSS畫素完全覆蓋了一個裝置畫素，圖片表示如下

但是在手機端，我們都知道網頁可以通過手指進行縮放，這時候CSS畫素也會改變

當用戶進行縮小操作時，一個裝置畫素覆蓋了多個CSS畫素

圖中深藍色表示裝置畫素，半透明的淺藍色表示CSS畫素

當用戶進行放大操作時，一個CSS畫素覆蓋了多個裝置畫素

DPR

DPR（devicePixelRatio）指的是裝置畫素比，即網頁在不進行縮放使，裝置畫素和CSS畫素的比值

DPR = 裝置畫素 / CSS畫素(某一方向上)

其實，在早先的移動裝置中是沒有DPR這個概念的，隨著技術的發展，移動裝置的螢幕畫素密度越來越高，就出現了DPR這個概念。

從iphone4開始，蘋果公司推出了retina視網膜螢幕，這種技術在螢幕大小不變的情況下，螢幕畫素密度提高了一倍，解析度自然也提高了一倍，於是DPR等於2

通過JS的screen.width和screen.height屬性，可以獲取螢幕的CSS畫素

通過JS的window.devicePixelRatio屬性，可以獲取螢幕的DPR值

以iphoneX為例，css畫素為375px * 812px，DPR是3，可以計算出裝置畫素是1125px * 2436px

螢幕尺寸

螢幕尺寸也是一個比較常見的概念，它指的是螢幕對角線的長度。比如iphone6 Plus的螢幕尺寸是5.5英寸，指的是螢幕的對角線的長度是5.5英寸長

1英寸 = 2.54釐米

螢幕解析度

螢幕解析度就是裝置畫素，一般以縱向畫素 * 橫向畫素來表示解析度。比如iphoneX的裝置畫素是1125px * 2436px

DPI和PPI

DPI(Dots Per Inch)是印刷行業中的術語，表示印表機每英寸可以噴的墨汁點數。計算機顯示裝置借鑑了DPI的概念，PPI(Pixels Per Inch)表示的是每英寸的畫素數量，即畫素密度（Screen density）。

在計算機顯示裝置中，可以認為PPI和DPI是一樣的，都是代表螢幕畫素密度

(PPI或DPI) = 對角線解析度 / 螢幕尺寸