移動端自適應佈局&微信小程序rpx

rpx是微信小程序推出的一個新單位，經過rpx可讓咱們的頁面根據屏幕寬度進行自適應，這一舉措解決了一直令前端頭疼的屏幕適配問題。

而在rpx出現以前，web頁面的自適應佈局已經有前人總結了一些解決方案，那爲何微信還要整出rpx這個新單位嗎，難道只是單純爲了顯示「咱們不同」？在解釋這個問題以前，咱們先簡單瞭解一下目前的主流自適應佈局解決方案：

響應式

響應式佈局的問題在於須要維護多個類型的樣式文件，維護成本太大，通常移動端頁面不會優先考慮，更多的使用在pc端項目上。

rem佈局

rem是近幾年比較流行的方案，手淘移動web端就是採用此方案。因爲1rem = 根元素的 font-size，因此rem佈局的本質就是經過rem把頁面按比例分割達到自適應的效果，不一樣的屏幕根元素設置不一樣的font-size尺寸，便可達到自適應的效果。如：

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

而後設置頁面中每一個元素的寬高爲相應的rem便可。

流式佈局

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

scale伸縮佈局

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

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

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

rpx佈局

上面四個方法，各有優缺點，如今咱們再來看看微信的rpx。rpx實際上就是系統級別的rem(把頁面按比例分割750份，1rpx=window.innerWidth/750)，或者經過scale佈局將頁面的寬度縮放到750.也就是說rpx佈局幫咱們把rem佈局的js設置根元素字體尺寸這一步驟省略了，或者是解決了scale伸縮佈局不能開啓gpu raster的問題。

經過rpx，咱們只須要根據750的設計稿寫代碼便可，沒必要擔憂在各個平臺的適配狀況。一次開發，在各個平臺都會長得如出一轍！