定義
像素（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，分辨率也就是1125px * 2436px
DPI和PPI
DPI(Dots Per Inch)是印刷行業中的術語，表示打印機每英寸可以噴的墨汁點數。計算機顯示設備借鑒了DPI的概念，PPI(Pixels Per Inch)表示的是每英寸的像素數量，即像素密度（Screen density）。
在計算機顯示設備中，可以認為PPI和DPI是一樣的，都是代表屏幕像素密度
(PPI或DPI) = 對角線分辨率 / 屏幕尺寸
