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


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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 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打包网站并在线压缩为zip
2016/02/13 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
关于js datetime的那点事
2011/11/15 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
Python代码的打包与发布详解
2014/07/30 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python 的topk算法实例
2020/04/02 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
教师见习期自我鉴定
2014/04/28 职场文书
收款委托书范本
2014/09/11 职场文书
生日宴会祝酒词
2015/08/10 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android