微信小程序新單位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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM