歡迎來我的部落格閱讀：「談談畫素以及微信小程式的 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，我打算聊聊下面的一些概念：
- 畫素 (Pixel)
- PPI (Pixels per inch 每英尺畫素)
- DPR (Device pixel ratio)
畫素
畫素，英文單詞：pixel，是英語單詞 「picture」 的簡寫 「pix」，加上 「element」 的簡寫 「el」，合成的詞彙，表示「影象元素」的意思。
一個畫素只能表達一個色塊，是顯示的最小的一個單元。
而在我們寫程式碼的時候，可以把畫素分為兩種：
- 物理畫素 Physical pixels
- 邏輯畫素 Logical pixels
物理畫素
也被稱為裝置畫素 (Device independent pixels)，即裝置在出廠的時候就已經固定了畫素。
我們來看一下 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 螢幕用四個(物理)畫素表示一個(邏輯)畫素。
PPI
Pixels per inch，每英寸畫素，也被稱為畫素密度，意思是一英寸中有多少個物理畫素。
其中 1英寸 (inch) = 2.54釐米 (cm)。
回顧一下上面的 iPhone6 和 iPhone6 plus 的官方規格說明圖，其中有 ppi 這一項，iPhone6 是 326ppi，iphone6 plus 是 401ppi。
PPI 怎麼算出來的？
要計算顯示器的每英寸畫素值，首先要確定螢幕的尺寸和解析度。
PPI 計算公式：
其中，
- dp (device pixel) 為螢幕對角線的解析度
- wp (width pixel) 為螢幕橫向解析度
- hp (height piexl) 為螢幕縱向解析度
- di (device inch) 為螢幕對角線的長度(單位為英寸)。
以 iPhone6 為例：
四捨五入那便是 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 的例項：
三款機器的邏輯畫素：
- 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 的過程中，攔不住思維的發散，瞭解了一大堆概念，然後順道給你們分享一下罷了。