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


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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
17道题让你彻底理解JS中的类型转换
Aug 08 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
第十四节 命名空间 [14]
2006/10/09 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
简单了解Vue + ElementUI后台管理模板
2020/04/07 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
深入理解Javascript中的this关键字
2015/03/27 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python实现斗地主分牌洗牌
2020/06/22 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
小区门卫管理制度
2014/01/29 职场文书
爱耳日活动总结
2014/04/30 职场文书
2014教师研修学习体会
2014/07/08 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
先进基层党组织材料
2014/12/25 职场文书
少年犯观后感
2015/06/11 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server