微信小程序整个页面的自动适应布局的实现


Posted in Javascript onJuly 12, 2020

按比例适应布局

大家有没有过一个烦恼,就是让某个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;
}

到此这篇关于微信小程序整个页面的自动适应布局的实现的文章就介绍到这了,更多相关小程序自动适应布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
Jquery插件写法笔记整理
Sep 06 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 #Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 #Javascript
Js on及addEventListener原理用法区别解析
Jul 11 #Javascript
JS call()及apply()方法使用实例汇总
Jul 11 #Javascript
JS如何定义用字符串拼接的变量
Jul 11 #Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 #Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 #Javascript
You might like
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Vue.Draggable实现拖拽效果
2020/07/29 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
python3访问sina首页中文的处理方法
2014/02/24 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python实现统计文本文件字数的方法
2017/05/05 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
医药销售自我评价200字
2014/09/11 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python