微信小程序尺寸單位的理解

前言

在使用 CSS 進行移動端的網頁開發時，由於不同手機設備的屏幕比，在換算像素單位時會遇到很多麻煩。為了方便開發人員適配各種屏幕WxSS 中加入了新的尺寸單位 rpx 即（responsive pixel，響應式像素)。

移動端網頁像素單位的換算難點，在於它有物理像素和邏輯像素兩種單位，物理像素是指屏幕上實際有多少個像素，而邏輯像素是指 CSS 中使用的像素單位。例如iPhone6的分辨率為 750px × 1334px，邏輯分辦率為 375px × 667px，經過換算可知1個邏輯像素需要2個物理像素來顯示。

為了方便換算，rpx 單位規定了任何手機屏幕的寬度都為 750rpx（邏輯像素），微信小程序內部負責將邏輯像素轉換為當前手機中的物理像素。也就是說，在繪制設計圖時，按照750px寬度進行繪制，然后在小程序中使用 rpx 為單位，就無需擔心不同手機之問寬度不同的問題了。