微信小程序開發--從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物理像素。 px與物理像素的比例與設備的dpr（像素倍率）有關。 rpx稱為相對像素值，rpx與物理像素也并非絕對的一比一關系。 wxss將設備寬定義為750rpx，是以iPhone6的分辨率（750x1334）為基準劃分的。 也就是說，在iPhone6上，1rpx=1物理像素=0.5px。 因為設計師標注的尺寸一般是物理分辨率。所以如果以iphone6為標準出設計稿的話，那么我們就可以不需要經過換算直接標準rpx。 這節課的內容就到這里結束了。 感謝您的閱讀。 |
