什麼是三倍圖？——移動端尺寸知識入門

PC和移動開發的不同

作為一個PC前端，我們每天都會遇到類似下面的代碼：

div { width: 100px; }

你有沒有想過這100px的長度到底有多長？他是一個像米、厘米一樣在現實中可以衡量的長度呢，還是一個相對於某個參照物的虛擬長度？

很多時候，我們是不關心的，因為這不影響我們開發，不影響我們做出響應式的頁面。

但是在移動端，手機的屏幕尺寸、解析度這些因素都會影響最終的顯示效果。為了處理這些情況衍生出了很多新的概念，這也是我們從PC轉向移動端需要了解的。

3種像素

接下來我們會了解3種不同的像素概念，可以簡單的認為是

1. 虛擬的像素
2. 現實的像素
3. 連接虛擬和現實的像素

了解了他們，我們就能明白3倍圖的概念。

虛擬的像素

即時沒有移動開發的概念，我們也知道一張圖片，他的解析度越高，就代表這張圖片越清晰。

那麼解析度是什麼？和我們要說的虛擬的像素有什麼關係？

我們有如下一張圖：

太小，看不清？那我們把圖片拉伸大點兒

可以明顯看到，圖片是由一個個色塊組成，這些色塊就是圖片像素，是由rgba四個通道混合而成。這些橫豎方向的像素共同拼出一幅圖畫。

圖片的解析度就是指 圖片 橫向的色塊數量 x 縱向的色塊數量。

之所以說圖片像素是虛擬的，是因為他沒有固定的尺寸，我們可以根據需要將圖片拉伸成任意尺寸，相應的每個像素也會縮放。

現實的像素

既然說到現實，那我們就拿點兒現實的東西來分析。以我的Iphone5s（女票淘汰的）為例：

主屏尺寸為 4英寸，根據：

1英寸（inch）=2.54厘米（cm）

主屏尺寸為 4 x 2.54 = 10.16cm，也就是說屏幕的對角線長約為10cm。

屏幕解析度是什麼？

知道了主屏尺寸是指手機的實際尺寸，我們接著看主屏解析度：

主屏解析度又叫 設備解析度。他是物理像素，也就是真實存在的像素。

如上圖主屏解析度為 1136 x 640 像素，可以理解為它豎邊有1136個格子，橫邊有640個格子。

這些格子用來做什麼的？

當然是存放像素塊嘍。

所以如果我們有一幅 1136 x 640 像素的圖片，放入1136 x 640 像素的屏幕，一個格子放一個像素塊，就能保真的顯示圖片。

連接虛擬與現實的像素

我們講了虛擬的像素和現實的像素，那麼怎麼才能連接兩者呢？

答案就是我們熟悉的CSS像素px

CSS像素又稱為 device-independent像素，簡稱DISP，說人話就是：設備無關像素。不同於設備像素是真實存在的像素，設備無關像素是一個抽象存在的像素。也就是說他可大可小。

那麼他是怎麼連接虛擬和現實的呢？

答案是：DPR（devicePixelRatio）設備像素比

DPR = 物理像素／設備無關像素

好暈啊！中場休息～～～

本來咱們搞PC前端的，只用設置個px就行，結果現在一下子冒出3種像素，能不暈嗎。

簡單點說：

1. 圖片像素是構成圖片的像素塊，他們是沒有實際尺寸的，你拉伸縮放圖片他的像素塊數量是不會變的。
2. 設備像素是指設備屏幕被劃分成的千千萬萬個小格子，是物理像素，你能夠通過設備的長寬和解析度計算出每個物理像素的尺寸。
3. CSS像素又叫設備無關像素，是一個抽象的概念。不同設備上的1px用肉眼看是不一樣長的。是我們編碼時用到的單位。

我們要解決什麼問題呢？

假設市面主流手機設備解析度都是 200 x 200，我的蘋果手機解析度更高，是 400 x 400。

我們剛才聊到設備解析度就是設備物理像素的數量，是存放像素的格子。

那一張流傳於市面上的 200 x 200 圖片像素的圖片，設置寬高200px，在別家手機里 圖片像素和設備像素（格子）一一對應，完美顯示。

可我家手機格子只能填滿一半！

那結果就是我家手機上顯示的圖片比別人家小一半！這不能忍啊！

可是iPhone並沒有這種情況發生，他是怎麼做到的呢？

2倍屏？3倍屏？

業界管DPR為2的屏幕稱為2倍屏，DPR為3的屏幕稱為3倍屏。

也就是說2倍屏 2 x 2 個物理像素對應 1 個設備無關像素，3倍屏 3 x 3 個物理像素對應 1 個設備無關像素。

同樣 div {width: 100px; height: 100px;}

在 2倍屏上顯示為：div {width: 200px; height: 200px;}

在 3倍屏上顯示為：div {width: 300px; height: 300px;}

現在我們可以回答剛才的問題：

為什麼一張 200 x 200圖片像素的圖，設置寬高200px，在400 x 400設備像素的手機上不會顯得縮小一倍呢？

因為2倍屏 2個物理像素對應1個設備無關像素。

寬高200 x 200 px（設備無關像素）在2倍屏上占 400 x 400（物理像素），這樣 設備無關像素 就能和 設備像素（物理像素） 一一對應了。

但這又帶來了另個一問題：

你們 設備無關像素 和 物理像素 倒是和諧相處，有沒有考慮過我圖片像素的感受？

我圖片像素只有 200 x 200，被強行以 物理素400 x 400顯示，圖片不就拉伸變模糊了么？

終於要祭出最終解決方案啦！

2倍圖！3倍圖！

答案就是：針對不同 DPR 的 屏幕，選擇不同圖片。

在1倍屏下 a.png 圖片像素： 100 x 100

在2倍屏下 a@2x.png 圖片像素 200 x 200

在3倍屏下 a@3x.png 圖片像素 300 x 300

這樣， 圖片像素-----設備無關像素------物理像素 就全對應上了。

這也就是設計同學口中的 2倍圖、3倍圖。

總結

今天我們聊了移動開發中3倍圖的含義，有以下幾點需要理解：

1個公式：DPR = 物理像素／設備無關像素

2個解析度：圖片解析度、設備解析度

3個像素：圖片像素、設備像素（物理像素）、設備無關像素

============全====劇====終============

To好奇寶寶：

你有沒有想過2倍、3倍屏的標準是什麼啊？

回到最開始的配置：

主屏解析度 根據勾股定理， 我們知道 高為 1136，寬為 640 ，可以得出斜邊約為 1303.87。而我們的主屏斜邊長度為 4英寸。 1303.87 ／4 約等於326。好巧是不是，剛好等於屏幕像素密度。

也就是說，像素密度描述的是一英寸斜邊代表的範圍內含有的物理像素塊的數量。

從該表可以看出，326PPI的設備就算2倍屏，401PPI的設備就是3倍屏幕。

彩蛋

你居然看到這裡啦！很棒棒哦～ 終於等到了我們的謝幕彩蛋：

推薦閱讀：