2.6、媒体查询(mediaquery)

概述

媒体查询作为响应式设计的核心,在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景:

  • 针对设备和应用的属性信息(比如显示区域、深浅色、分辨率),设计出相匹配的布局。
  • 当屏幕发生动态改变时(比如分屏、横竖屏切换),同步更新应用的页面布局。

我开发的 Demo 展示

在这里插入图片描述

以下代码均经过我 demo 的实战验证,确保代码和效果对应

引入与使用流程

媒体查询通过mediaquery模块接口,设置查询条件并绑定回调函数,在对应的条件的回调函数里更改页面布局或者实现业务逻辑,实现页面的响应式设计。具体步骤如下:

首先导入媒体查询模块。

import mediaquery from '@ohos.mediaquery';

通过matchMediaSync接口设置媒体查询条件,保存返回的条件监听句柄listener。例如监听横屏事件:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764249.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

V2X技术与智能传感器的完美融合:提升城市道路安全

在科技不断创新的今天,城市交通领域涌现了大量新技术。有时候我们不仅仅需要独立应用这些新技术来实现交通的变革,更需要将它们巧妙地结合连接起来,以获取更高效更安全的交通环境。本文将探讨V2X技术与智能传感器的结合,如何在城市…

专为智能设备安全打造 | 基于ACM32 MCU的智能断路器方案

随着我国电网建设的快速发展,数字化变电站成为建设和研究的热点,数字化变电站的核心在于一次设备的智能化与二次设备的网络化,对于断路器这种极其重要的电力一次设备而言,其智能化的实现有十分重要的意义,断路器智能化…

平衡隐私与效率,Partisia Blockchain 解锁数字安全新时代

原文:https://cointelegraph.com/news/exploring-multiparty-computations-role-in-the-future-of-blockchain-privacy; https://medium.com/partisia-blockchain/unlocking-tomorrow-outlook-for-mpc-in-2024-and-beyond-cb170e3ec567 编译&#xff1…

skywalking监听apisix

一、原理 Skywalking结合OpenTelemetry Collector Apisix的promethus插件实现对apisix metrics数据的收集。 二、数据流图 1. Apisix Promethus插件从Apisix收集指标数据。 2. OpenTelemetry Collector通过promethus receiver获取来自Apisix Promethus插件的指标数据&#…

python的OA公文发文管理系统flask-django-php-nodejs

采用结构化的分析设计,该方法要求结合一定的图表,在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”的思想,在OA公文发文管理系统实现了用户、公文分类、公文信息、待办提醒等的功能性。系统根据现有的管理模块进行开发和扩展&a…

为什么本地开发环境通常使用 HTTP 而不是 HTTPS

简单快捷:HTTP 相对于 HTTPS 更简单和快速。在开发过程中,可能频繁地修改代码并测试,使用 HTTP 可以减少一些开发中的额外步骤和复杂性。 不涉及敏感信息:在本地开发环境中,通常不涉及真实用户数据或敏感信息的传输&a…

(附源码)基于Spring Boot和Vue的前后端分离考研资料分享平台的设计与实现

前言 💗博主介绍:✌专注于Java、小程序技术领域和毕业项目实战✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 2024年Java精品实战案例《100套》 🍅文末获取源码联系🍅 &#x1f31…

利用Node.js模块在Electron中进行文件系统操作实战(下)

利用Node.js模块在Electron中进行文件系统操作实战(下) 更详细的文件权限控制文件锁(File Locking)临时文件符号链接(Symbolic Links)和硬链接(Hard Links)文件监视(File…

旅游网站|基于JSP技术+ Mysql+Java+ B/S结构的旅游网站设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java,ssm,springboot的平台设计与实现项目系统开发资源(可…

「媒体宣传」企业活动发布会邀请媒体报道的好处与优势?

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 企业活动发布会邀请媒体报道具有多种好处与优势,这些都有助于提升企业的知名度、形象和影响力。以下是一些主要的好处与优势: 提升品牌知名度:媒体报道…

目标控制器数字孪生系统的研究与设计

文章来源:铁路计算机应用,2023,32(10):36-41. 作者:许婧,杨硕,季志均 摘要:随着目标控制器(OC,Object Controller)系统在轨道交通领域的推广应用,其硬件投入较高、研发…

短视频矩阵系统----源头开发

短视频矩阵源码技术开发要求及实现流程: 短视频矩阵开发要求具备视频录制、编辑、剪辑、分享等基本功能,支持实时滤镜、特效、音乐等个性化编辑,能够实现高效的视频渲染和处理。开发流程主要包括需求分析、技术选型、设计架构、编码实现、测试…

OpenHarmony实现一次开发多端部署分布式新闻客户端页面

分布式新闻客户端(ArkTS) 介绍 本篇Codelab基于栅格布局、设备管理和多端协同,实现一次开发,多端部署的分布式新闻客户端页面。主要包含以下功能: 展示新闻列表以及左右滑动切换新闻Tab。点击新闻展示新闻详情页。点…

opencv自定义间隔帧获取视频转存为图片的GUI界面实现

该程序功能只将mp4转为jpg 希望得到您的指导 非常感谢您观看我的博客,我的博客是为了记录我的学习过程同时保留我的某些可重复利用代码以方便下次使用。如果您对我的博客有任何建议还请您不吝指出,非常感谢您对我的指导。 背景 在实现opencv逐帧获取…

【PHP】通过PHP开启/暂停Apache、MySQL或其他服务

目录 一、前言 二、代码 一、前言 有些时候我们需要开启或暂停一些服务,比如说开启Apach或暂停MySQL服务等,最近工作中也开发了这方面的功能,记录下来怎样使用PHP语言来开启或暂停Apache、MySQL服务的运行状态。 这种方法也适用其他服务。…

laravel(源码笔记) 路由注册,加载,寻址,参数绑定过程

路由 Application __construct 注册路由到服务容器 setBasePathregisterBaseBindingsregisterBaseServiceProviders EventServiceProviderLogServiceProviderRoutingServiceProvider registerRouter registerCoreContainerAliases 加载路由文件 App\Providers\RouteServicePr…

深度学习中的随机种子random_seed

解释 由于模型中的参数初始化例如权重参数如下图,就是随机初始化的,为了能够更好的得到论文中提到效果,可以设置随机种子,从而减少算法结果的随机性,使其接近于原始结果。 设置了随机种子,产生的随机数都…

基于Java中的SSM框架实现考研指导平台系统项目【项目源码+论文说明】计算机毕业设计

基于Java中的SSM框架实现考研指导平台系统演示 摘要 应对考研的学生,为了更好的使校园考研有一个更好的环境好好的学习,建议一个好的校园网站,是非常有必要的。提供学生的学习提供一个交流的空间。帮助同学们在学习高数、学习设计、学习统计…

Docker搭建LNMP环境实战(一):前言

缘起:不久前学习了Docker相关知识,并在Docker环境下学习了LNMP环境的搭建。由于网上的文章大多没有翔实、可行的案例,很多文章都是断章取义,所以,期间踩了太多太多的坑,初学者想要真正顺利地搭建一套环境起…

数值代数中的灵敏度分析【条件数】

文章目录 一、条件数二、解线性方程组问题的条件数 在数值分析领域,灵敏度分析是一种用来评估数值模型对输入参数变化的敏感程度的技术。它在许多科学和工程领域中都有广泛的应用,包括金融、工程设计、自然资源管理等。 一、条件数 一个实际问题化为数…