微信小程序整個(gè)頁(yè)面的自動(dòng)適應(yīng)布局的實(shí)現(xiàn)
按比例適應(yīng)布局
大家有沒(méi)有過(guò)一個(gè)煩惱，就是讓某個(gè)view的高度或者寬度擴(kuò)大點(diǎn)，而且是要按比例適應(yīng)不同的手機(jī)，遇到這類(lèi)問(wèn)題應(yīng)該怎么辦？
下面就為大家講解怎么做一個(gè)能夠自動(dòng)適應(yīng)不同手機(jī)的布局
1、像素單位 rpx
首先，我們來(lái)說(shuō)說(shuō)像素單位rpx，rpx是官方為小程序出的尺寸單位rpx(responsive pixel)，它可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬度為750rpx。所以平常我們應(yīng)該盡量使用rpx來(lái)代替px
2、容器view的寬高使用百分百的方式
其次，我們來(lái)說(shuō)說(shuō)容器view的寬高應(yīng)該盡量使用百分比的方式來(lái)寫(xiě)，下面我們來(lái)看看以下的示例：
首先來(lái)張顯示圖
注意：這里的滿(mǎn)屏顯示設(shè)置高度100%，會(huì)有什么都不顯示的情況，下面會(huì)講解到
下面，你們要的重點(diǎn)來(lái)了，上代碼:
代碼
wxml
<view class="view_contain"> <view class="view_1"> </view> <view class="view_2"> </view> <view class="view_3"> </view> </view>
wxss
/* 使用page就是為了保證 滿(mǎn)屏 */
page{
width: 100%;
height: 100%;
}
.view_contain {
width: 100%;
height: 100%;
}
.view_1 {
width: 100%;
height: 20%;
background: #b1d0f1;
}
.view_2 {
width: 100%;
height: 30%;
background: #c1f3aa;
}
.view_3 {
width: 100%;
height: 50%;
background: #f1d0b1;
}
到此這篇關(guān)于微信小程序整個(gè)頁(yè)面的自動(dòng)適應(yīng)布局的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序自動(dòng)適應(yīng)布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整的"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"到底是怎么做到的？下面我們就來(lái)通過(guò)示例來(lái)探討下。2015-06-06
js刷新頁(yè)面location.reload()用法詳解
這篇文章主要介紹了js刷新頁(yè)面location.reload()用法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
location.search在客戶(hù)端獲取Url參數(shù)的方法
最近一直在寫(xiě)html，剛接觸到，感覺(jué)挺復(fù)雜的。。比如傳參，在.net里可以直接用Request接受，而在html中還要經(jīng)過(guò)處理，找了一些資料，寫(xiě)了個(gè)方法。2010-06-06
amd、cmd、esmodule、commonjs區(qū)別詳解
本文主要介紹了amd、cmd、esmodule、commonjs區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
JS 中forEach，for in、for of用法實(shí)例總結(jié)
這篇文章主要介紹了JS 中forEach，for in、for of用法,結(jié)合實(shí)例形式總結(jié)分析了JS 中forEach，for in、for of的基本功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-05-05
詳解uniapp分包的實(shí)現(xiàn)方式及優(yōu)點(diǎn)
當(dāng)今移動(dòng)應(yīng)用開(kāi)發(fā)領(lǐng)域,隨著用戶(hù)對(duì)于應(yīng)用功能和體驗(yàn)的要求不斷提高,應(yīng)用程序的復(fù)雜度也在不斷增加,在這種情況下,應(yīng)用程序的體積也隨之增大,為了解決這個(gè)問(wèn)題,Uniapp提供了分包功能,本文將詳細(xì)介紹Uniapp分包的功能和優(yōu)勢(shì),包括如何通過(guò)配置文件實(shí)現(xiàn)分包2023-09-09
多瀏覽器兼容的動(dòng)態(tài)加載 JavaScript 與 CSS
Omar AL Zabir這位MVP總是喜歡搞些稀奇古怪同時(shí)又很實(shí)用的小東西，并且還十分值得參考。最近他就做了一個(gè)叫做ensure的小工具用于動(dòng)態(tài)加載JavaScript、CSS與HTML，而且IE、Firefox、Opera、Safari都支持了，那么我們就來(lái)看看ensure是如何做到動(dòng)態(tài)加載JavaScript與CSS的。2008-09-09
javascript 判斷中文字符長(zhǎng)度的函數(shù)代碼
在很多時(shí)候,我們?cè)谶M(jìn)行數(shù)據(jù)提交數(shù)據(jù)庫(kù)時(shí).先會(huì)用javascript對(duì)其進(jìn)行有效性驗(yàn)證.如一個(gè)中文javascript為的length是1.但是數(shù)據(jù)庫(kù)中會(huì)占二個(gè)字節(jié).容易出錯(cuò)2012-08-08
JS獲取整個(gè)頁(yè)面文檔的實(shí)現(xiàn)代碼
就是在當(dāng)前頁(yè)面用AJAX請(qǐng)求當(dāng)前頁(yè)面，返回的就是整個(gè)頁(yè)面的HTML··既然是整個(gè)頁(yè)面，所以也包括文檔聲明2011-12-12
使用JavaScript實(shí)現(xiàn)構(gòu)建一個(gè)動(dòng)態(tài)數(shù)據(jù)可視化儀表板
現(xiàn)代Web開(kāi)發(fā)中,JavaScript不僅是網(wǎng)頁(yè)交互的核心,而且已經(jīng)成為實(shí)現(xiàn)復(fù)雜前端功能的重要工具,本文將展示如何使用JavaScript構(gòu)建一個(gè)動(dòng)態(tài)數(shù)據(jù)可視化儀表板,需要的可以參考下2024-02-02