⼩程序整个页⾯的⾃动适应布局的实现
按⽐例适应布局
⼤家有没有过⼀个烦恼，就是让某个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;
}
到此这篇关于⼩程序整个页⾯的⾃动适应布局的实现的⽂章就介绍到这了，更多相关⼩程序⾃动适应布局内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。