1. 程式人生 > >全棧工程師之路-中級篇之小程式開發-第一章第五節從px到rpx

全棧工程師之路-中級篇之小程式開發-第一章第五節從px到rpx

這一小節作為第一章的最後一節,其實關於單位的文章,在部落格上倒是挺多的。

我一直在想,我是不是有必要再寫這一節,還是給大家提供一些閱讀連結。

因為關於單位的定義都是比較官方的。沒什麼好討論的,我這裡做一個彙總和簡單的說明吧。

首先本文只以移動裝置為例說明。

本文摘要:設計師以iphone6為標準出設計稿的話,1rpx=0.5px=1物理畫素。Photoshop裡面量出來的尺寸為物理畫素點。所以可以直接使用標註尺寸資料。

--------------------------------------看懂本文摘要的話,就不用閱讀下面的內容了-------------------------------------

【英寸Inch】英寸表示螢幕斜對角線的長度。如下圖所示:


【畫素Pixel】畫素是影象的基本取樣單位,它不是一個確定的物理量,因為畫素點的物理大小是不確定的。如圖:


【解析度】解析度是螢幕畫素的數量,一般用螢幕寬度的畫素點乘以螢幕高度的畫素點。如描述iphone6的解析度是750*1334.

解析度又分為【物理解析度】和【邏輯解析度】,值得注意的是實際工作中設計師常常給的是物理解析度,程式中用到的是邏輯解析度,但是都稱為解析度,容易混淆。

【物理解析度】是硬體所支援的解析度,【邏輯解析度】是軟體可以達到的解析度。

物理解析度和邏輯解析度的商稱為【畫素倍率dpr】,也就是常說的幾倍屏。

如下圖中所示,iphone6的解析度寫著375*667,這裡指的就是它的邏輯解析度。我們上面提的750*1334則是它的物理解析度。

所以iphone6的畫素倍率=(750*1334)/(375*667)=2


理解了上述的幾個概念,我們就可以接著來看下面的幾個單位。

【px】px就是Pixel的縮寫,就是指畫素。這個作為圖片取樣的基本單位,沒什麼需要特別說明的。

【rem】在做移動端適配是最常用的方法就是使用rem作為單位,因為rem是根據html的fontsize去動態計算實際的px的。

所以常常應用這點,做反向使用。即根據螢幕大小動態的設定fontsize.來達到不同的解析度下有一樣的效果。

【rpx】rpx其實是微信對於rem的一種應用的規定,或者說一種設計的方案,官方上規定螢幕寬度為20rem,規定螢幕寬為750rpx。

所以在微信小程式中1rem=750/20rpx。

但是這不是我們要關注的重點。

在使用rem時,我們常常讓設計師根據iphone6的標準出設計稿。因為如果以iphone6為標準,並且在iphone6上將fontsize設定成62.5%。

那麼1rem就等於10px,我們只要將設計師標註的尺寸(一般標註的是物理解析度)除以20就可以得到單位為rem的數值了。

在 iPhone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。
css中的px與裝置的物理畫素並非絕對的一比一關係。

px與物理畫素的比例與裝置的dpr(畫素倍率)有關。

rpx稱為相對畫素值,rpx與物理畫素也並非絕對的一比一關係。

wxss將裝置寬定義為750rpx,是以iPhone6的解析度(750x1334)為基準劃分的。

也就是說,在iPhone6上,1rpx=1物理畫素=0.5px。

因為設計師標註的尺寸一般是物理解析度。所以如果以iphone6為標準出設計稿的話,那麼我們就可以不需要經過換算直接標準rpx。

這節課的內容就到這裡結束了。

感謝您的閱讀。

我是小虎(最近把名字改成了莽夫,覺得比較符合我的性格特徵,說好的行不改名坐不改姓呢,捂臉),希望你開心。

如果你覺得本文對你有幫助,請掃描文末二維碼,支援博主原創。

希望大家關注我的個人公眾號ionic_