像素其實分為兩種，分別是物理像素和CSS像素

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

    DPR由瀏覽器廠商決定，我們無法修改，但可以通過window.devicePixelRatio讀取DPR。
    可能有人疑問DPR和dppx到底啥關系，我們可以認為DPR描述的是未縮放狀態(tài)，而dppx可以描述任意時刻的狀態(tài)，未縮放狀態(tài)下的dppx和DPR相等，當有縮放操作時，此時的物理像素和CSS像素的比例關系就只能用dppx描述了。

視口（viewport）

視口也叫作初始包含塊，之所以叫這個名字，是因為它包含