欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

談談像素以及微信小程序的 rpx - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網站建設-昆明葵宇信息科技有限公司

159-8711-8523

云南網建設/小程序開發(fā)/軟件開發(fā)

知識

不管是網站,軟件還是小程序,都要直接或間接能為您產生價值,我們在追求其視覺表現(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,我打算聊聊下面的一些概念:

  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 (右圖) 的官方顯示屏的規(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 屏幕用四個(物理)像素表示一個(邏輯)像素。

Chrome 下 iPhone6 邏輯像素

PPI

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

回顧一下上面的 iPhone6 和 iPhone6 plus 的官方規(guī)格說明圖,其中有 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 值。

那么如何求出一個設備的物理像素的長度?
因為絕大多數(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:

1
let dpr = window.devicePixelRatio;

而通過下面的代碼可以獲取設備的邏輯像素:

1
2
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,其實我們開發(fā)和設計的時候也不用管這個,當作它就是 3 倍 dpr 就好了。

回到 rpx

根據官方給出的 rpx 換算 px 的實例:
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ā)散,了解了一大堆概念,然后順道給你們分享一下罷了。

相關案例查看更多