幽灵资源网 Design By www.bzswh.com
按比例适应布局
大家有没有过一个烦恼,就是让某个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; }
标签:
小程序自动适应布局,小程序自适应
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...