按比例適應佈局

大家有沒有過一個煩惱，就是讓某個view的高度或者寬度擴大點，而且是要按比例適應不同的手機，遇到這類問題應該怎麼辦？
下面就為大家講解怎麼做一個能夠自動適應不同手機的佈局

1、畫素單位 rpx

首先，我們來說說畫素單位rpx，rpx是官方為小程式出的尺寸單位rpx(responsive pixel)，它可以根據螢幕寬度進行自適應。規定螢幕寬度為750rpx。所以平常我們應該儘量使用rpx來代替px

2、容器view的寬高使用百分百的方式

其次，我們來說說容器view的寬高應該儘量使用百分比的方式來寫，下面我們來看看以下的示例：

首先來張顯示圖

注意：這裡的滿屏顯示設定高度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;
}

到此這篇關於微信小程式整個頁面的自動適應佈局的實現的文章就介紹到這了,更多相關小程式自動適應佈局內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！