【前端佈局】px與rpx的簡述

本文只以移動設備爲例說明。

注意：設計師以iphone6爲標準出設計稿的話，1rpx=0.5px=1物理像素。Photoshop裏面量出來的尺寸爲物理像素點。因此能夠直接使用標註尺寸數據。

【像素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。