微信小程序整个页面的自动适应布局的实现
按比例适应布局
大家有没有过一个烦恼，就是让某个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;
}
到此这篇关于微信小程序整个页面的自动适应布局的实现的文章就介绍到这了,更多相关小程序自动适应布局内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库！
-
本文向大家介绍微信小程序 Flex布局详解，包括了微信小程序 Flex布局详解的使用技巧和注意事项，需要的朋友参考一下 微信小程序页面布局方式采用的是Flex布局。 Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 Flex布局提供了元素在容器中的对齐，方向以及顺序，甚至他们可以是动态的或者不确定的大小的。 Flex布局的主要特征是能够调整其子元素在
-
问题内容： 我正在尝试编写代码以放大/缩小应用程序的整个页面/屏幕。给我这个链接 Android-使用展开/捏放大/缩小RelativeLayout 但是对于初学者来说，要理解所有遵循的程序确实非常困难。 如果有人可以提供帮助并提供有关此主题的更清晰的说明，我和其他初学者肯定会感激。 到目前为止，我有集，和。 问题答案： 首先，让我们从简单开始。缩放相对容易。（此代码在其他示例中未使用）： 并且是
-
本文向大家介绍微信小程序实现滑动翻页效果(完整代码)，包括了微信小程序实现滑动翻页效果(完整代码)的使用技巧和注意事项，需要的朋友参考一下 微信小程序实现滑动翻页效果，效果图如下所示： 源码： js css 总结 以上所述是小编给大家介绍的微信小程序实现滑动翻页效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！ 如果你觉得本文对你
-
本文向大家介绍微信小程序通过js实现瀑布流布局详解，包括了微信小程序通过js实现瀑布流布局详解的使用技巧和注意事项，需要的朋友参考一下 前言 瀑布流 - 小程序中数据列表或者图片展示难免高度不一，而我们一般固定宽度，让其高度自适应，并无缝对接。如下图： 瀑布流的两种做法： css: 在父元素上使用column-count: 2也可以做到两列排版。但column-count: 2是左右两列排版，如果
-
本文向大家介绍微信小程序页面传多个参数跳转页面的实现方法，包括了微信小程序页面传多个参数跳转页面的实现方法的使用技巧和注意事项，需要的朋友参考一下 这里举例跳转两个参数 传递多少个也可以 这里传参数 我写作 data-item data-id 来绑定 同事加了点击事件bindtap 在index.js 在 data 里我写的是假数据 在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在con
-
本文向大家介绍微信小程序的分类页面制作，包括了微信小程序的分类页面制作的使用技巧和注意事项，需要的朋友参考一下 微信小程序实的分类页面制作 先上效果图。 这个界面布局难度不是很大，css基础好的，很快就实现了，分类界面，左边是一级目录，右边是一级目录对应的二级目录，根据 这个需求，我们数据设计的结构一定是数组嵌套数组，第一个数组包含一级目录数据，嵌套的数组包含的是二级目录的数据。 代码的实现 js