WeChatウィジェットのページ全体の自動適応レイアウトの実現

配置に比例して適応する
皆さんはあるviewの高さや幅を広げて、しかも割合によって違う携帯に適応するという悩みを持ったことがありますか？
次に、それぞれの携帯のレイアウトに自動的に適応する方法を説明します。
1、画素単位rpx
まず、画素単位rpxというと、rpxは、画面幅に応じて適応できる小規模プログラムのサイズ単位rpxである。スクリーンの幅を750 rpxとします。だから、普段はできるだけrpxを使ってpxの代わりにします。
2、容器viewの広さと高さは100%の方式を使う。
次に、容器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;
}

ここで、微信小プログラムのページ全体の自動適応レイアウトの実現に関する記事を紹介します。より多くの関連小プログラムは自動的にレイアウトに適応しています。以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。