按比例适应布局
大家有没有过一个烦恼，就是让某个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;
}
标签：
小程序自动适应布局,小程序自适应
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“微信小程序整个页面的自动适应布局的实现”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。