成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信小程序新單位rpx與自適應(yīng)布局

Java_oldboy / 2616人閱讀

摘要：布局上面四個(gè)方法，各有優(yōu)缺點(diǎn)，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實(shí)際上就是系統(tǒng)級(jí)的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。

rpx是微信小程序新推出的一個(gè)單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信還搗鼓出新的rpx單位？在解釋這個(gè)單位前，我們先簡(jiǎn)單了解一下目前的主流的自適應(yīng)布局解決方案：

響應(yīng)式（Responsive web design)

rem

流式布局

scale伸縮布局

響應(yīng)式

響應(yīng)式布局的問題在于需要維護(hù)多個(gè)樣式文件，維護(hù)成本太大，一般的移動(dòng)H5頁面都不會(huì)優(yōu)先考慮。

rem

rem是近幾年比較流行的方案，淘寶移動(dòng)web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本質(zhì)就是通過rem把頁面按比例分割達(dá)到自適應(yīng)的效果，因?yàn)閞em是相對(duì)根路徑font-size尺寸，不同的頁面設(shè)置不同的font-size尺寸，即可達(dá)到自適應(yīng)的效果。為了方便理解，我寫了一個(gè)簡(jiǎn)單的rem布局demo，通過設(shè)置

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

然后設(shè)置

的寬高等于1rem，就可以使box的寬高自適應(yīng)各種設(shè)備尺寸。因?yàn)閎ox的單位1em是跟頁面設(shè)備的寬對(duì)應(yīng)的，所以能做到自適應(yīng)各種尺寸。

流式布局

流式布局需要用到百分比或者flex，即寬度永遠(yuǎn)鋪滿頁面寬度，但高度和其他單位仍然用px。我個(gè)人比較推薦用流式布局，因?yàn)榱魇讲季植恍枰駌em那樣額外通過js動(dòng)態(tài)調(diào)整根元素的字體尺寸。雖然某些大屏幕下，無法100%還原設(shè)計(jì)稿，但這也是流式布局的精髓，它的字體精度可以保持跟設(shè)備系統(tǒng)一致（dpi）。

scale伸縮布局

scale伸縮布局顧名思義，就是通過拉伸縮小頁面來達(dá)到自適應(yīng)。有兩種方法，一是通過js更改viewport的initial-scale，這種方法比較麻煩，另一種是直接寫死viewport的寬度，例如：，意思就是告訴瀏覽器：這個(gè)頁面我要一直用360px的寬度處理，在不同的尺寸上，麻煩伸縮一下。假如在320的iphone上，放大到360，在375的iphone上，縮小到360。這樣我只需要以360這個(gè)尺寸出設(shè)計(jì)稿就行，頁面會(huì)伸縮適應(yīng)。實(shí)際效果可以通過手機(jī)訪問：scale伸縮demo。scale伸縮的問題在于，不能顯式設(shè)置minimum-scale=1.0，否則就達(dá)不到效果。而這個(gè)值是chromium37以上的webview觸發(fā)gpu raster的一個(gè)條件，所以用這種方法就沒法利用gpu raster硬件加速。

rpx布局

上面四個(gè)方法，各有優(yōu)缺點(diǎn)，現(xiàn)在回頭看看微信的rpx，相信大家已經(jīng)有所啟發(fā)，rpx實(shí)際上就是系統(tǒng)級(jí)的rem（把頁面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸縮布局的width=750。也就是說，微信小程序的rpx布局幫大家把rem布局的js設(shè)置根元素字體尺寸這步省了，或者減少了scale伸縮布局不能開啟gpu raster的問題。

通過rpx，大家只需要根據(jù)750的設(shè)計(jì)稿寫代碼即可，不必?fù)?dān)心它在各個(gè)平臺(tái)的適配情況，實(shí)際上在各個(gè)平臺(tái)都會(huì)長(zhǎng)得一樣，從此媽媽再也不用擔(dān)心我的頁面適配問題啦。

參考鏈接：

https://www.chromium.org/deve...

https://mp.weixin.qq.com/debu...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50147.html

相關(guān)文章

  • 微信小程序新單位rpx與自適應(yīng)布局

    摘要：布局上面四個(gè)方法，各有優(yōu)缺點(diǎn)，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實(shí)際上就是系統(tǒng)級(jí)的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個(gè)單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信...

    LeviDing 評(píng)論0 收藏0

  • 微信小程序新單位rpx與自適應(yīng)布局

    摘要：布局上面四個(gè)方法，各有優(yōu)缺點(diǎn)，現(xiàn)在回頭看看微信的，相信大家已經(jīng)有所啟發(fā)，實(shí)際上就是系統(tǒng)級(jí)的把頁面按比例分割份，，或者伸縮布局的。也就是說，微信小程序的布局幫大家把布局的設(shè)置根元素字體尺寸這步省了，或者減少了伸縮布局不能開啟的問題。 rpx是微信小程序新推出的一個(gè)單位，按官方的定義，rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，在rpx出現(xiàn)之前，web頁面的自適應(yīng)布局已經(jīng)有了多種解決方案，為什么微信...

    thursday 評(píng)論0 收藏0

  • 微信小程序（新）必備知識(shí)

    摘要：組件化開發(fā)小程序在未出現(xiàn)組件之前，要重用的話，只能簡(jiǎn)單復(fù)制粗暴黏貼組件化開發(fā)的優(yōu)勢(shì)可復(fù)用代碼分離，可維護(hù)更重要定義組件先創(chuàng)建文件夾用于存放組件，然后再創(chuàng)建組件文件夾注意組件的文件名并不是組件名，而頁面文件名是頁面名，組件名是引用時(shí)才確定的引 組件化開發(fā) 小程序在未出現(xiàn)組件之前，要重用的話，只能簡(jiǎn)單（復(fù)制）粗暴（黏貼） 組件化開發(fā)的優(yōu)勢(shì)： 1、可復(fù)用（wxml/wxss/js） 2、代...

    mengera88 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<