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


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 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
JavaScript 对象模型 执行模型
Dec 06 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 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 金额数字转换成英文
2010/05/06 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
微信跳一跳自动运行python脚本
2018/01/08 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
Java面试笔试题大全
2016/11/23 面试题
工作个人的自我评价
2014/01/14 职场文书
七年级音乐教学反思
2014/01/26 职场文书
教师求职信
2014/06/17 职场文书
单位租房协议书样本
2014/10/30 职场文书
五好家庭申报材料
2014/12/20 职场文书
工程质量保证书
2015/05/09 职场文书
2015年中秋节主持词
2015/07/30 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
Python 中的Sympy详细使用
2021/08/07 Python
Python安装使用Scrapy框架
2022/04/12 Python