像素其實(shí)分為兩種，分別是物理像素和CSS像素
-
物理像素（設(shè)備像素）
物理像素，顧名思義，顯示屏是由一個(gè)個(gè)物理像素點(diǎn)組成的，通過控制每個(gè)像素點(diǎn)的顏色，使屏幕顯示出不同的圖像，屏幕從工廠出來那天起，它上面的物理像素點(diǎn)就固定不變了，單位pt。
通常我們看一些電子設(shè)備的參數(shù)，比如分辨率用的就是物理像素。它配合屏幕尺寸（注意：屏幕尺寸通常是說屏幕的對(duì)角線長(zhǎng)度），可以計(jì)算出PPI（每英寸像素取值），即每一英寸物理像素?cái)?shù)量。PPI越高，說明屏幕能提供更多細(xì)節(jié)。
-
CSS像素
CSS和js使用的抽象單位，瀏覽器內(nèi)的一切長(zhǎng)度都是以CSS像素為單位的，CSS像素的單位是px。 -
物理像素和CSS像素之間的關(guān)系(dppx，DPR)
在非高清屏及未縮放的狀態(tài)下，一個(gè)CSS像素等于一個(gè)物理像素，而在一些PPI非常高的屏幕（例如蘋果的視網(wǎng)膜屏幕）上，如果還讓一個(gè)CSS像素等于一個(gè)物理像素，就會(huì)導(dǎo)致網(wǎng)頁上的元素變得非常小，因此高PPI屏下，通常一個(gè)CSS像素等于兩個(gè)甚至三個(gè)物理像素（由瀏覽器廠商決定，不同瀏覽器設(shè)定的值可能不同）。如果一個(gè)CSS像素占用n個(gè)物理像素，那么我們就說此時(shí)的dppx(dots per px)為n。
所以，我們可以用dppx描述物理像素和CSS像素之間的關(guān)系。dppx除了和PPI有關(guān)，也和當(dāng)前縮放狀態(tài)有關(guān)，舉個(gè)例子，在非高清屏下，如果沒縮放，一個(gè)CSS像素占用一個(gè)物理像素，此時(shí)是1dppx，但如果將頁面放大到200%，此時(shí)一個(gè)CSS像素等于兩個(gè)物理像素，即2dppx。
DPR（設(shè)備像素比，devicePixelRatio）描述的是未縮放狀態(tài)下，物理像素和CSS像素的初始比例關(guān)系，計(jì)算方法如下圖。
DPR由瀏覽器廠商決定，我們無法修改，但可以通過window.devicePixelRatio讀取DPR。
可能有人疑問DPR和dppx到底啥關(guān)系，我們可以認(rèn)為DPR描述的是未縮放狀態(tài)，而dppx可以描述任意時(shí)刻的狀態(tài)，未縮放狀態(tài)下的dppx和DPR相等，當(dāng)有縮放操作時(shí)，此時(shí)的物理像素和CSS像素的比例關(guān)系就只能用dppx描述了。
視口（viewport）
視口也叫作初始包含塊，之所以叫這個(gè)名字，是因?yàn)樗?
