微信小程序整個(gè)頁面的自動(dòng)適應(yīng)布局的實(shí)現(xiàn)
按比例適應(yīng)布局
大家有沒有過一個(gè)煩惱，就是讓某個(gè)view的高度或者寬度擴(kuò)大點(diǎn)，而且是要按比例適應(yīng)不同的手機(jī)，遇到這類問題應(yīng)該怎么辦？
下面就為大家講解怎么做一個(gè)能夠自動(dòng)適應(yīng)不同手機(jī)的布局
1、像素單位 rpx
首先，我們來說說像素單位rpx，rpx是官方為小程序出的尺寸單位rpx(responsive pixel)，它可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬度為750rpx。所以平常我們應(yīng)該盡量使用rpx來代替px
2、容器view的寬高使用百分百的方式
其次，我們來說說容器view的寬高應(yīng)該盡量使用百分比的方式來寫，下面我們來看看以下的示例：
首先來張顯示圖
注意：這里的滿屏顯示設(shè)置高度100%，會(huì)有什么都不顯示的情況，下面會(huì)講解到
下面，你們要的重點(diǎn)來了，上代碼:
代碼
wxml
<view class="view_contain"> <view class="view_1"> </view> <view class="view_2"> </view> <view class="view_3"> </view> </view>
wxss
/* 使用page就是為了保證 滿屏 */
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è)頁面的自動(dòng)適應(yīng)布局的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序自動(dòng)適應(yīng)布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Js之軟鍵盤實(shí)現(xiàn)(js源碼)...2007-01-01
JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框，頁面左右兩邊跟隨式廣告框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了詳解JSON和JSONP劫持以及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)原生步驟條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
js跳轉(zhuǎn)到指定url的方法與實(shí)際使用
這篇文章主要給大家介紹了關(guān)于js跳轉(zhuǎn)到指定url的方法與實(shí)際使用的相關(guān)資料,要實(shí)現(xiàn)JavaScript跳轉(zhuǎn)到指定URL,可以使用window.location對象來實(shí)現(xiàn),需要的朋友可以參考下2023-09-09
JavaScript defineProperty如何實(shí)現(xiàn)屬性劫持
雙向數(shù)據(jù)綁定的核心方法,主要是做數(shù)據(jù)劫持操作(監(jiān)控?cái)?shù)據(jù)變化),下面這篇文章主要給大家介紹了關(guān)于JavaScript defineProperty如何實(shí)現(xiàn)屬性劫持的相關(guān)資料,需要的朋友可以參考下2021-07-07
JS實(shí)現(xiàn)可以用鍵盤方向鍵控制的動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)可以用鍵盤方向鍵控制的動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家介紹了uni-app的iPhonex底部安全區(qū)域解決方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢圖案鎖屏功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要為大家詳細(xì)介紹了javascript事件綁定使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10