微信小程序新單位rpx與自適應佈局

rpx是微信小程序新推出的一個單位，按官方的定義，rpx能夠根據屏幕寬度進行自適應，在rpx出現以前，web頁面的自適應佈局已經有了多種解決方案，爲何微信還搗鼓出新的rpx單位？在解釋這個單位前，咱們先簡單瞭解一下目前的主流的自適應佈局解決方案：

1. 響應式（Responsive web design)

2. rem

3. 流式佈局

4. scale伸縮佈局

響應式

響應式佈局的問題在於須要維護多個樣式文件，維護成本太大，通常的移動H5頁面都不會優先考慮。

rem

rem是近幾年比較流行的方案，淘寶移動web端就是採用此方案，因爲1rem=根元素font-size，因此rem佈局的本質就是經過rem把頁面按比例分割達到自適應的效果，由於rem是相對根路徑font-size尺寸，不一樣的頁面設置不一樣的font-size尺寸，便可達到自適應的效果。爲了方便理解，我寫了一個簡單的rem佈局demo，經過設置

 document.documentElement.style.fontSize = window.innerWidth + 'px';

而後設置<div class="box"></div>的寬高等於1rem，就可使box的寬高自適應各類設備尺寸。由於box的單位1em是跟頁面設備的寬對應的，因此能作到自適應各類尺寸。

流式佈局

流式佈局須要用到百分比或者flex，即寬度永遠鋪滿頁面寬度，但高度和其餘單位仍然用px。我我的比較推薦用流式佈局，由於流式佈局不須要像rem那樣額外經過js動態調整根元素的字體尺寸。雖然某些大屏幕下，沒法100%還原設計稿，但這也是流式佈局的精髓，它的字體精度能夠保持跟設備系統一致（dpi）。

scale伸縮佈局

scale伸縮佈局顧名思義，就是經過拉伸縮小頁面來達到自適應。有兩種方法，一是經過js更改viewport的initial-scale，這種方法比較麻煩，另外一種是直接寫死viewport的寬度，例如：

<meta name="viewport" content="width=360, user-scalable=no">

意思就是告訴瀏覽器：這個頁面我要一直用360px的寬度處理，在不一樣的尺寸上，麻煩伸縮一下。假如在320的iphone上，放大到360，在375的iphone上，縮小到360。這樣我只須要以360這個尺寸出設計稿就行，頁面會伸縮適應。實際效果能夠經過手機訪問：scale伸縮demo。scale伸縮的問題在於，不能顯式設置minimum-scale=1.0，不然就達不到效果。而這個值是chromium37以上的webview觸發gpu raster的一個條件，因此用這種方法就無法利用gpu raster硬件加速。

rpx佈局

上面四個方法，各有優缺點，如今回頭看看微信的rpx，相信你們已經有所啓發，rpx實際上就是系統級的rem（把頁面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸縮佈局的width=750。也就是說，微信小程序的rpx佈局幫你們把rem佈局的js設置根元素字體尺寸這步省了，或者減小了scale伸縮佈局不能開啓gpu raster的問題。

經過rpx，你們只須要根據750的設計稿寫代碼便可，沒必要擔憂它在各個平臺的適配狀況，實際上在各個平臺都會長得同樣，今後媽媽不再用擔憂個人頁面適配問題啦。

 

參考連接：

1. https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization

2. https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html