談談像素以及微信小程序的 rpx

歡迎來個人博客閱讀：「談談像素以及微信小程序的 rpx」

前言

最近在負責有讚的某個業務的微信小程序開發，這是我第一次着手微信小程序的開發，這個過程當中發現微信小程序所定義的一套 WXSS (WeiXin Style Sheets) 中有一個有趣的長度單位 rpx，即 responsive pixel。
根據官方的描述：

rpx（responsive pixel）， 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

平時咱們通常會用 em 或者 rem 來作屏幕適配，而在微信小程序中，能夠方便的藉助 rpx 來完成這項工做。

那麼怎麼理解 rpx，還有它與 px 之間什麼關係？什麼是物理像素？
爲了更好理解 rpx，我打算聊聊下面的一些概念：

1. 像素 (Pixel)
2. PPI (Pixels per inch 每英尺像素)
3. DPR (Device pixel ratio)

像素

像素，英文單詞：pixel，是英語單詞 「picture」 的簡寫 「pix」，加上 「element」 的簡寫 「el」，合成的詞彙，表示「圖像元素」的意思。
一個像素只能表達一個色塊，是顯示的最小的一個單元。

而在咱們寫代碼的時候，能夠把像素分爲兩種：

1. 物理像素 Physical pixels
2. 邏輯像素 Logical pixels

物理像素

也被稱爲設備像素 (Device independent pixels)，即設備在出廠的時候就已經固定了像素。

咱們來看一下 iPhone6 (左圖) 與 iPhone6 plus (右圖) 的官方顯示屏的規格說明：

iPhone6 & iPhone6 plus 規格

iPhone6 是 1334px x 750px 的像素分辨率，意思是當手機豎放的時候，橫向有 750 個物理像素，縱向有 1334 個物理像素。

邏輯像素

在 CSS 中也被稱爲 CSS 像素 (CSS pixels)，是爲 Web 開發者創造的，在 CSS 和 JavaScript 中使用的一個抽象的層，每個 CSS 聲明和幾乎全部的 Javascript 屬性都使用 CSS 像素。

例如咱們平時使用 Chrome 的設備調試工具的時候，iPhone6 是高 667px，寬是 375px，與蘋果官方的 1334px x 750px，長寬分別少了 2 倍，那麼面積就少了 4 倍。這就是常常說的 Retina 屏幕用四個(物理)像素表示一個(邏輯)像素。

Chrome 下 iPhone6 邏輯像素

PPI

Pixels per inch，每英寸像素，也被稱爲像素密度，意思是一英寸中有多少個物理像素。
其中 1英寸 (inch) = 2.54釐米 (cm)。

回顧一下上面的 iPhone6 和 iPhone6 plus 的官方規格說明圖，其中有 ppi 這一項，iPhone6 是 326ppi，iphone6 plus 是 401ppi。

PPI 怎麼算出來的？

要計算顯示器的每英寸像素值，首先要肯定屏幕的尺寸和分辨率。
PPI 計算公式：

PPI 計算公式

其中，

• dp (device pixel) 爲屏幕對角線的分辨率
• wp (width pixel) 爲屏幕橫向分辨率
• hp (height piexl) 爲屏幕縱向分辨率
• di (device inch) 爲屏幕對角線的長度(單位爲英寸)。

以 iPhone6 爲例：

iPhone6 PPI 計算

四捨五入那即是 326ppi 了。

物理像素有多大？

「物理像素」是有特定長度的，這取決於 ppi 值。

那麼如何求出一個設備的物理像素的長度？
由於絕大多數設備的物理像素都是方形的，咱們能夠假設當前設備的像素是方形的。
那麼，

• iPhone6 中每一個像素長度：1inch / 326ppi ≈ 0.003 inch = 0.0762mm
• iPhone6 plus 中每一個像素長度：1inch / 401ppi ≈ 0.002 inch = 0.0508mm

能夠看出 iPhone6 plus 的屏幕製做工藝更加精細。
由於像素越小，那麼單位面積內像素點就越多，顯示的效果人眼就越難看出毛刺。
用來顯示一份圖像的像素越多，效果就越接近現實。

和物理像素不一樣，「邏輯像素」沒有特定的物理長度的，只是表示顯示設備中最小的顯示單元，優秀的顯示設備徹底能夠把顯示單元作的更加小，已達到更好的顯示效果。

DPR

Device Pixel Ratio，設備像素比。

在早先的移動設備中，並無 DPR 的概念。隨着技術的發展，移動設備的屏幕像素密度愈來愈高。
從 iPhone4 開始，蘋果公司推出了所謂的 Retina 視網膜屏幕。之因此叫作視網膜屏幕，是由於屏幕的 PPI 過高，人的視網膜沒法分辨出屏幕上的像素點。
iPhone4 的分辨率提升了一倍，但屏幕尺寸卻沒有變化，這意味着一樣大小的屏幕上，像素多了一倍，因而 dpr = 2。

在 Chrome 瀏覽器能夠經過如下代碼獲取設備的 DPR：

let dpr = window.devicePixelRatio;複製代碼

而經過下面的代碼能夠獲取設備的邏輯像素：

let logicalHeight = screen.height;
let logicalWidth = screen.width;複製代碼

那麼不少人看到這裏，就會認爲：物理像素 = 邏輯像素 * dpr
但實際狀況並非這樣，
留意一下 iPhone6 plus 的物理像素和邏輯像素：

• 物理像素：1080px x 1920px
• 邏輯像素：414px x 736px

而官方聲稱 iPhone6 plus 的 dpr = 3，按理應該是：

• 414px x 736px → 乘以 3 倍 dpr → 1242px x 2208px

那麼 iPhone6 plus 只有 1080px x 1920px，怎麼去展現 1241px x 2208px 的分辨率呢？

原來 iPhone6 plus 對邏輯像素作了縮小處理，以適應物理像素，也就是
1241px x 2208px 除以 115% ，獲得 1080px x 1920px。

換句話來講，原本 iPhone6 plus 的 dpr = 2.6，可是經過虛擬技術把物理像素放大 115% ，以達到 dpr = 3 的效果。

因此說是假 3 倍 dpr，其實咱們開發和設計的時候也不用管這個，看成它就是 3 倍 dpr 就行了。

回到 rpx

根據官方給出的 rpx 換算 px 的實例：

rpx 換算 px

三款機器的邏輯像素：

• iPhone5 : 320px x 568px
• iPhone6 : 375px x 667px
• iPhone6 plus : 414px x 736px

rpx 轉換成 px 是須要乘以一個係數的：

• px = rpx * n

其中係數 n，是跟着設備改變的：

• iPhone5: n = 2.34
• iPhone6: n = 2
• iPhone6 plus: n = 1.81

因此 rpx 只是定義一個絕對值 750 寬度，而後簡單的根據不一樣設備的邏輯像素來進行 rpx 到 px 的換算。

精明的觀衆可能發現了， rpx 壓根就不須要關心 DPR 和 PPI 的概念。
呃，其實我就是在理解 rpx 的過程當中，攔不住思惟的發散，瞭解了一大堆概念，而後順道給大家分享一下罷了。

參考

Wiki - 像素
Wiki - 每英寸像素
iPhone 6 Screens Demystified