微信小程序整个页面的自动适应布局的实现
更新时间：2020年07月12日 15:37:21 作者：wy313622821
这篇文章主要介绍了微信小程序整个页面的自动适应布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
按比例适应布局
大家有没有过一个烦恼，就是让某个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;
}
到此这篇关于微信小程序整个页面的自动适应布局的实现的文章就介绍到这了,更多相关小程序自动适应布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现多列选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
非常不错的关键字高亮代码，用js实现，这个方法不错2008-07-07
EChart开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。本文将利用EChart实现仪表盘的绘制，感兴趣的可以学习一下2022-03-03
这篇文章主要介绍了javascript判断一个变量是数组还是对象，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
javascript设计模式 – 观察者模式原理与用法实例分析
这篇文章主要介绍了javascript设计模式 – 观察者模式,结合实例形式分析了javascript观察者模式相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了javascript操作select元素的方法,可实现针对select元素选中元素时动态改变html元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了使用typescript快速开发一个cli的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了微信小程序下拉框功能的实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
JavaScript中定义function有以下三种方式.2009-10-10
从对象的格式可以看出，如果字串的格式定义成 json 格式的， 就可以直接转换为obj了，感兴趣的朋友可以参考下哈2013-04-04
最新评论