響應式（responsive web design )
rem流式布局
scale伸縮布局
響應式響應式布局的問題在於需要維護多個樣式檔案，維護成本太大，一般的移動h5頁面都不會優先考慮。
rem
rem是近幾年比較流行的方案，**移動web端就是採用此方案，由於1rem=根元素font-size，所以rem布局的本質就是通過rem把頁面按比例分割達到自適應的效果，因為rem是相對根路徑font-size尺寸，不同的頁面設定不同的font-size尺寸，即可達到自適應的效果。為了方便理解，我寫了乙個簡單的rem布局demo，通過設定
document.documentelement.style.fontsize = window.innerwidth + 'px';
然後設定
的寬高等於1rem，就可以使box的寬高自適應各種裝置尺寸。因為box的單位1em是跟頁面裝置的寬對應的，所以能做到自適應各種尺寸。
流式布局
流式布局需要用到百分比或者flex，即寬度永遠鋪滿頁面寬度，但高度和其他單位仍然用px。我個人比較推薦用流式布局，因為流式布局不需要像rem那樣額外通過js動態調整根元素的字型尺寸。雖然某些大螢幕下，無法100%還原設計稿，但這也是流式布局的精髓，它的字型精度可以保持跟裝置系統一致（dpi）。
scale伸縮布局
scale伸縮布局顧名思義，就是通過拉伸縮小頁面來達到自適應。有兩種方法，一是通過js更改viewport的initial-scale，這種方法比較麻煩，另一種是直接寫死viewport的寬度，例如：，意思就是告訴瀏覽器：這個頁面我要一直用360px的寬度處理，在不同的尺寸上，麻煩伸縮一下。假如在320的iphone上，放大到360，在375的iphone上，縮小到360。這樣我只需要以360這個尺寸出設計稿就行，頁面會伸縮適應。實際效果可以通過手機訪問：scale伸縮demo。scale伸縮的問題在於，不能顯式設定minimum-scale=1.0，否則就達不到效果。而這個值是chromium37以上的webview觸發gpu raster的乙個條件，所以用這種方法就沒法利用gpu raster硬體加速。
rpx布局
通過rpx，大家只需要根據750的設計稿寫**即可，不必擔心它在各個平台的適配情況，實際上在各個平台都會長得一樣，從此媽媽再也不用擔心我的頁面適配問題啦。
微信小程式 rpx單位的理解
如何理解rpx？rpx responsive pixel 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iphone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx 375px 750物理畫素，1rpx 0.5px 1物理畫素。小測試 1 rpx 全稱是什麼？請填寫英...
微信小程式 尺寸單位rpx與px,rem相互轉換
官方文件 rpx responsive pixel 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iphone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx 375px 750物理畫素，1rpx 0.5px 1物理畫素。裝置rpx換算px 螢幕寬度 750 px換算...
微信小程式中rpx與rem單位使用
來自 授權位址 rpx單位官方文件 rpx單位基礎介紹 如果看完上面幾篇文章，我們開始進入正題吧 1 js中匯入下面這段 function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,fal...