以下名稱概念：

1、屏幕尺寸：指的是屏幕對角線的長度

2、分辨率：是指寬度上和高度上最多能顯示的物理像素點個數(shù)

3、點距：像素與像素之間的距離，點距和屏幕尺寸決定了分辨率大小

4、PPI:屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素點個數(shù)，這里的一英寸還是對角線長度

5、DPI:每英寸像素點，印刷行業(yè)術語。對于電腦屏幕而言和PPI是一個意思

6、設備像素(又稱為物理像素): 指設備能控制顯示的最小物理單位，意指顯示器上一個個的點。從屏幕在工廠生產(chǎn)出的那天起，它上面設備像素點就固定不變了，和屏幕尺寸大小有關，單位 pt。

7、設備獨立像素(也叫密度無關像素或邏輯像素)：可以認為是計算機坐標系統(tǒng)中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，這個點是沒有固定大小的，越小越清晰，然后由相關系統(tǒng)轉換為物理像素。

8、css像素(也叫虛擬像素)：指的是 CSS 樣式代碼中使用的邏輯像素，在 CSS 規(guī)范中，長度單位可以分為兩類，絕對(absolute)單位以及相對(relative)單位。px 是一個相對單位，相對的是設備像素(device pixel)

9、DPR(設備像素比)：設備像素比 = 設備像素 / 設備獨立像素。(在Retina屏的iphone上，DPR為2，1個css像素相當于2個物理像素)

綜合上面幾個概念，一起舉例說明下：

以iphone6為例：

設備寬高為375×667，可以理解為設備獨立像素(或css像素)。

dpr為2，根據(jù)上面的計算公式，其物理像素就應該×2，為750×1334。

對于這樣的css樣式：

width: 2px;

height: 2px;

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1個css像素所對應的物理像素個數(shù)是不一致的。

在普通屏幕下，1個css像素 對應 1個物理像素(1:1)。

在retina 屏幕下，1個css像素對應 4個物理像素(1:4)