微信小程序——整个页面的自动适应布局、图片自适应、高度自动占满剩余部分_小程序margin-top在不同手机切换间距比较大

1、按比例适应布局

大家有没有过一个烦恼，就是让某个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>
1
2
3
4
5
6
7
8
9
10
11
12

.
.
.
.
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

2、图片自适应

设置mode=“widthFix”，记得要加上height: auto;

<image class="img-minus" src="../../images/icon_minus.png" mode="widthFix"></image>
1

.img-minus{
width: 20rpx;
  height: auto;}
1
2
3

3、高度自动占满剩余部分

方式一：绝对定位

<view class="content">
		<view class="view1"/>
		<view class="view2"/>		
	</view>
1
2
3
4

.wxss

.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.view1 {
		height: 50upx;
		background-color: #007AFF;
	}

	.view2 {
		background-color: #aaff7f;		
		flex: 1;
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

方式二：绝对定位

第一部分高度50rpx，第二部分高度自动占满剩余部分，代码如下：

<view class="intro">
	<view class="view1"></view>
	<view class="view2"></view>
</view>
1
2
3
4

page{
  width: 100%;
  height: 100%;
}
.intro {
  width: 100%;
  height: 100%;
  background-color: #999;
}

.view1{
  height: 50rpx;
  background-color: rgb(139, 236, 241);
}


.view2{
  width: 100%;
  background-color: rgb(232, 241, 148);
  /* 关键代码 */
  position: absolute;
  top: 50rpx;
  left: 0;
  bottom: 0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

方式三：box-sizing: border-box;

思路：父类容器padding：50rpx 0 0，第一个子类容器margin-top: - 50rpx，第二个容器 height: 100%; 全部代码为：

<view class="intro">
	<view class="view1">内容一</view>
	<view class="view2">内容二</view>
</view>
1
2
3
4

page {
  width: 100%;
  height: 100%;
}

.intro {
  width: 100%;
  height: 100%;
  background-color: #999;

  padding: 50rpx 0 0;
  box-sizing: border-box;
}

.view1 {
  background-color: rgb(139, 236, 241);

  margin-top: -50rpx;
  height: 50rpx;
}

.view2 {
  width: 100%;
  background-color: rgb(232, 241, 148);

  height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

方式四：box-sizing: border-box;

思路：父类容器padding：50rpx 0 0，第一个子类容器绝对定位 top:0;，第二个容器 height: 100%; 全部代码为：

<view class="intro">
	<view class="view1">内容一</view>
	<view class="view2">内容二</view>
</view>
1
2
3
4

page {
  width: 100%;
  height: 100%;
}

.intro {
  width: 100%;
  height: 100%;
  background-color: #999;

  padding: 50rpx 0 0;
  box-sizing: border-box;
}

.view1 {
  background-color: rgb(139, 236, 241);
  height: 50rpx;
  width: 100%;

  position: absolute;
  left: 0;
  top: 0;
}


.view2 {
  width: 100%;
  background-color: rgb(232, 241, 148);

  height: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31