知識
不管是網站,軟件還是小程序,都要直接或間接能為您產生價值,我們在追求其視覺表現(xiàn)的同時,更側重于功能的便捷,營銷的便利,運營的高效,讓網站成為營銷工具,讓軟件能切實提升企業(yè)內部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持!
談談像素以及微信小程序的 rpx
發(fā)表時間:2021-1-5
發(fā)布人:葵宇科技
瀏覽次數(shù):66
前言
最近在負責某個業(yè)務的微信小程序開發(fā),這是我第一次著手微信小程序的開發(fā),這個過程中發(fā)現(xiàn)微信小程序所定義的一套 WXSS (WeiXin Style Sheets) 中有一個有趣的長度單位 rpx
,即 responsive pixel。
根據官方的描述:
rpx(responsive pixel), 可以根據屏幕寬度進行自適應。規(guī)定屏幕寬為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 (右圖) 的官方顯示屏的規(guī)格說明:
iPhone6 是 1334px x 750px
的像素分辨率,意思是當手機豎放的時候,橫向有 750 個物理像素,縱向有 1334 個物理像素。
邏輯像素
在 CSS 中也被稱為 CSS 像素 (CSS pixels),是為 Web 開發(fā)者創(chuàng)造的,在 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 的官方規(guī)格說明圖,其中有 ppi
這一項,iPhone6 是 326ppi
,iphone6 plus 是 401ppi
。
PPI 怎么算出來的?
要計算顯示器的每英寸像素值,首先要確定屏幕的尺寸和分辨率。
PPI 計算公式:
其中,
- dp (device pixel) 為屏幕對角線的分辨率
- wp (width pixel) 為屏幕橫向分辨率
- hp (height piexl) 為屏幕縱向分辨率
- di (device inch) 為屏幕對角線的長度(單位為英寸)。
以 iPhone6 為例:
四舍五入那便是 326ppi
了。
物理像素有多大?
「物理像素」是有特定長度的,這取決于 ppi 值。
那么如何求出一個設備的物理像素的長度?
因為絕大多數(shù)設備的物理像素都是方形的,我們可以假設當前設備的像素是方形的。
那么,
- iPhone6 中每個像素長度:1inch / 326ppi ≈ 0.003 inch = 0.0762mm
- iPhone6 plus 中每個像素長度:1inch / 401ppi ≈ 0.002 inch = 0.0508mm
可以看出 iPhone6 plus 的屏幕制作工藝更加精細。
因為像素越小,那么單位面積內像素點就越多,顯示的效果人眼就越難看出毛刺。
用來顯示一份圖像的像素越多,效果就越接近現(xiàn)實。
和物理像素不同,「邏輯像素」沒有特定的物理長度的,只是表示顯示設備中最小的顯示單元,優(yōu)秀的顯示設備完全可以把顯示單元做的更加小,以達到更好的顯示效果。
DPR
Device Pixel Ratio,設備像素比。
在早先的移動設備中,并沒有 DPR 的概念。隨著技術的發(fā)展,移動設備的屏幕像素密度越來越高。
從 iPhone4 開始,蘋果公司推出了所謂的 Retina 視網膜屏幕。之所以叫做視網膜屏幕,是因為屏幕的 PPI 太高,人的視網膜無法分辨出屏幕上的像素點。
iPhone4 的分辨率提高了一倍,但屏幕尺寸卻沒有變化,這意味著同樣大小的屏幕上,像素多了一倍,于是 dpr = 2
。
在 Chrome 瀏覽器可以通過以下代碼獲取設備的 DPR:
|
|
而通過下面的代碼可以獲取設備的邏輯像素:
|
|
那么很多人看到這里,就會認為:物理像素 = 邏輯像素 * 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,其實我們開發(fā)和設計的時候也不用管這個,當作它就是 3 倍 dpr 就好了。
回到 rpx
根據官方給出的 rpx 換算 px 的實例:
三款機器的邏輯像素:
- iPhone5 :
320px x 568px
- iPhone6 :
375px x 667px
- iPhone6 plus :
414px x 736px
rpx 轉換成 px 是需要乘以一個系數(shù)的:
px = rpx * n
其中系數(shù) n,是跟著設備改變的:
- iPhone5:
n = 2.34
- iPhone6:
n = 2
- iPhone6 plus:
n = 1.81
所以 rpx 只是定義一個絕對值 750 寬度,然后簡單的根據不同設備的邏輯像素來進行 rpx 到 px 的換算。
精明的觀眾可能發(fā)現(xiàn)了, rpx 壓根就不需要關心 DPR 和 PPI 的概念。
呃,其實我就是在理解 rpx 的過程中,攔不住思維的發(fā)散,了解了一大堆概念,然后順道給你們分享一下罷了。