脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序自动适应布局

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

 更新时间：2020年07月12日 15:37:21   作者：wy313622821  
这篇文章主要介绍了微信小程序整个页面的自动适应布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

按比例适应布局

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

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

您可能感兴趣的文章:

相关文章

  • JS制作手机端自适应缩放显示

    JS制作手机端自适应缩放显示

    允许网页宽度自动调整的"自适应网页设计"到底是怎么做到的？下面我们就来通过示例来探讨下。
    2015-06-06
  • js刷新页面location.reload()用法详解

    js刷新页面location.reload()用法详解

    这篇文章主要介绍了js刷新页面location.reload()用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • location.search在客户端获取Url参数的方法

    location.search在客户端获取Url参数的方法

    最近一直在写html，刚接触到，感觉挺复杂的。。比如传参，在.net里可以直接用Request接受，而在html中还要经过处理，找了一些资料，写了个方法。
    2010-06-06
  • amd、cmd、esmodule、commonjs区别详解

    amd、cmd、esmodule、commonjs区别详解

    本文主要介绍了amd、cmd、esmodule、commonjs区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • JS 中forEach，for in、for of用法实例总结

    JS 中forEach，for in、for of用法实例总结

    这篇文章主要介绍了JS 中forEach，for in、for of用法,结合实例形式总结分析了JS 中forEach，for in、for of的基本功能、使用方法与相关注意事项,需要的朋友可以参考下
    2023-05-05
  • 详解uniapp分包的实现方式及优点

    详解uniapp分包的实现方式及优点

    当今移动应用开发领域,随着用户对于应用功能和体验的要求不断提高,应用程序的复杂度也在不断增加,在这种情况下,应用程序的体积也随之增大,为了解决这个问题,Uniapp提供了分包功能,本文将详细介绍Uniapp分包的功能和优势,包括如何通过配置文件实现分包
    2023-09-09
  • 多浏览器兼容的动态加载 JavaScript 与 CSS

    多浏览器兼容的动态加载 JavaScript 与 CSS

    Omar AL Zabir这位MVP总是喜欢搞些稀奇古怪同时又很实用的小东西，并且还十分值得参考。最近他就做了一个叫做ensure的小工具用于动态加载JavaScript、CSS与HTML，而且IE、Firefox、Opera、Safari都支持了，那么我们就来看看ensure是如何做到动态加载JavaScript与CSS的。
    2008-09-09
  • javascript 判断中文字符长度的函数代码

    javascript 判断中文字符长度的函数代码

    在很多时候,我们在进行数据提交数据库时.先会用javascript对其进行有效性验证.如一个中文javascript为的length是1.但是数据库中会占二个字节.容易出错
    2012-08-08
  • JS获取整个页面文档的实现代码

    JS获取整个页面文档的实现代码

    就是在当前页面用AJAX请求当前页面，返回的就是整个页面的HTML··既然是整个页面，所以也包括文档声明
    2011-12-12
  • 使用JavaScript实现构建一个动态数据可视化仪表板

    使用JavaScript实现构建一个动态数据可视化仪表板

    现代Web开发中,JavaScript不仅是网页交互的核心,而且已经成为实现复杂前端功能的重要工具,本文将展示如何使用JavaScript构建一个动态数据可视化仪表板,需要的可以参考下
    2024-02-02

最新评论