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