前言
最近在負責有贊的某個業(yè)務(wù)的微信小程序開發(fā),這是我第一次著手微信小程序的開發(fā),這個過程中發(fā)現(xiàn)微信小程序所定義的一套 WXSS (WeiXin Style Sheets) 中有一個有趣的長度單位 rpx,即 responsive pixel。
根據(jù)官方的描述:
rpx(responsive pixel), 可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
平時我們一般會用 em 或者 rem 來做屏幕適配,而在微信小程序中,可以方便的借助 rpx 來完成這項工作。
那么怎么理解 rpx,還有它與 px 之間什么關(guān)系?什么是物理像素?
為了更好理解 rpx,我打算聊聊下面的一些概念:
-
像素 (Pixel)
-
PPI (Pixels per inch 每英尺像素)
-
DPR (Device pixel ratio)
像素
像素,英文單詞:pixel,是英語單詞 「picture」的簡寫 「pix」
|