## 一、什么是像素？ 像素：**一個像素就是計算機屏幕所能顯示一種特定顏色的最小區域。** 這是像素的概念，實際上，在 web 前端開發領域，像素有以下兩層含義： 1、設備像素：設備屏幕的物理像素，對于任何設備來講物理像素的數量是固定的。 2、CSS像素：這是一個抽象的像素概念，它是為 web 開發者創造的。 ### 1.1 設備像素 無論是早期的 CRT 顯示器還是如今的 LCD 顯示器，都是基于點陣的。也就是說通過一些列的小點排列成一個大的矩形，不同的小點通過顯示不同的顏色來顯示成圖像。比如下圖就是 LCD 顯示器上一個 6x6 個小點排列成的矩陣：  注意每一個像素（pixel，也可以稱之為 dot）又是由三個子像素 (subpixel) 紅綠藍組合而成。當需要顯示圖片信息時，它的工作原理可以如下圖所示：  上圖中的左側是放大之后我們能看到的像素，而右側就是對應像素在顯示器上的顯示情況了。 注意上圖代表的僅是 LCD 顯示器的物理像素情況，早期的 CRT 顯示器的物理像素同樣也是由獨立的點組成。但是不存在 subpixel 的概念，情況如下圖所示：  上面描述的這些顯示器上的像素我們就稱之為物理像素 (physical pixel) 或者設備像素 (device pixel)。 ### 1.2 CSS 像素 作為 Web 開發者，我們接觸的更多的是用于控制元素樣式的樣式單位像素。這里的像素我們稱之為 CSS 像素。 假設我們用 PC 瀏覽器打開一個頁面，瀏覽器此時的寬度為 800px，頁面上同時有一個 400px 寬的塊級元素容器。很明顯此時塊狀容器應該占頁面的一半。 但如果我們把頁面放大，放大為 200%，也就是原來的兩倍。此時塊狀容器則橫向占滿了整個瀏覽器。 此時我們既沒有調整瀏覽器窗口大小，也沒有改變塊狀元素的 css 寬度，但是它看上去卻變大了一倍——這是因為我們把 CSS 像素放大為了原來的兩倍。 CSS 像素與屏幕像素 1：1 同樣大小時：  CSS 像素 (黑色邊框) 開始被拉伸，此時 1 個 CSS 像素大于 1 個屏幕像素：  也就是說默認情況下一個 CSS 像素應該是等于一個物理像素的寬度的，但是瀏覽器的放大操作讓一個 CSS 像素等于了兩個設備像素寬度。在高 PPI 的設備上，CSS 像素甚至在默認狀態下就相當于多個物理像素的尺寸。 ## 二、PPI 是什么？ PPI 的復雜之處在于如果他所屬的上下文環境不同，意義也會完全不一樣。 當我們在談論顯示設備的 PPI 時，它代指的屏幕的像素密度；當我們在談論和圖片相關時，我們談論的是打印時的分辨率或者打印機的打印精度。這里我們主要描述的前一種情況。 PPI 全稱為 Pixel Per Inch，譯為每英寸像素取值，更確切的說法應該是像素密度，也就是衡量單位物理面積內擁有像素值的情況。 在 1 英寸單位內面積內擁有的像素越多，密度越大，PPI 值就越高。但像素密度的實際意義是什么？它表達的是什么？或高或低對設備顯示來說有什么影響？ 一般來說，我們當然希望 PPI 值越高越好，因為更高的 PPI 意味著在同一實際尺寸的物理屏幕上能容納更多的像素，能夠展現更多的畫面細節，也就意味著更平滑的畫面。原理如下：  但 PPI 過高同樣也會帶來問題，相同的圖片素材，在越高的設備上會顯示的越小。以下是一個像素在不同 PPI 設備上的可見情況，隨著 PPI 的增高可視度越來越小：  那么可以預見一種很糟糕的情況是，同一尺寸的屏幕下假設 PPI 提高了一倍，很可能程序界面縮小了 4 倍（因為在屏幕尺寸不變的情況下物理像素點面積是原來的 1/4）。 以 Surface Pro 3 為例，它的默認分辨率是 2160x1440，也就是說 Surface 這臺設備的屏幕物理像素有 2160x1440 個點，同時默認分辨率情況下，一個點物理像素點對應于一個分辨率像素。 但因為屏幕只有 12 寸，像素密度非常高，于是就出現了上面的問題，各個文字和圖標被縮的太小了，電腦是完全不可用的。 解決方法是，Windows 默認將所有的文本和素材（實際上就是分辨率像素）都放大了 1.5 倍（在“屏幕分辨率”-“放大或縮小文本和其他項”中進行了設置），原來是一個物理像素對應一個分辨率下的像素，現在則是 1.5 個物理像素對應一個分辨率下的像素，也就意味著分辨率下的像素變大了，實際分辨率降低了，已經變成了1440x900。 從上面我們得知，因為高像素密度設備下的 UI 會采用一定比例的縮放：  正如上圖所示，左側普通屏幕中，2x2 的 CSS 像素真的只需要 2x2 的物理像素。但是右側高清屏中，2x2 的 CSS 像素卻需要 4x4 的物理像素。