按比例适应布局

大家有没有过一个烦恼,就是让某个view的高度或者宽度扩大点,而且是要按比例适应不同的手机,遇到这类问题应该怎么办?
下面就为大家讲解怎么做一个能够自动适应不同手机的布局

1、像素单位 rpx

首先,我们来说说像素单位rpx,rpx是官方为小程序出的尺寸单位rpx(responsive pixel),它可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。所以平常我们应该尽量使用rpx来代替px

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

其次,我们来说说容器view的宽高应该尽量使用百分比的方式来写,下面我们来看看以下的示例:

首先来张显示图

微信小程序页面自动适应布局的实现

注意:这里的满屏显示设置高度100%,会有什么都不显示的情况,下面会讲解到

下面,你们要的重点来了,上代码:

***此处内容登录后可见***

温馨提示:此处为隐藏内容,需要登录后可见

发表评论

您的电子邮箱地址不会被公开。