2.6、媒体查询(mediaquery)

概述

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

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

我开发的 Demo 展示

在这里插入图片描述

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

引入与使用流程

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

首先导入媒体查询模块。

import mediaquery from '@ohos.mediaquery';

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

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

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

相关文章

Kubernetes自动化配置部署

在新建工程中,使用k8s的devops服务,自动化部署项目 1、在搭建好k8s的集群中,确认已开启devops服务; 2、新建Maven项目之后,创建dockerfile、deploy和Jenkins文件 例如: Dockerfile FROM bairong.k8s.m…

virtualBox虚拟机的Ubuntu系统下vscode 的标题栏无法显示,打开文件对话框显示不正常。

遇到问题:vscode 的标题栏无法显示,打开文件对话框显示不正常。打开文件对话框显示闪烁无法打开文件。如下图所示 解决办法: (1)Ctrl Shift P 输入 Preferences: Configure Runtime Arguments 搜“"disable-h…

Linux:权限的概念与理解

目录 1. Linux权限的概念 2. Linux权限管理 01.文件访问者的分类 02.文件类型和访问权限 03.文件权限值的表示方法 04. 文件访问权限的相关设置方法 3. 使用 sudo分配权限 4. 目录的权限 ---------- 权限 用户角色(具体的人) 文件权限属性 ---------- 1. Linux权限的…

QT tableWidget横向纵向设置

横向控件 要设置QTabWidget选项卡的字体方向,可以使用QTabWidget的setTabPosition()方法。通过传递Qt枚举值QTabWidget.east或QTabWidget.west作为参数,可以设置选项卡的字体方向为从左到右或从右到左。 myTabWidget QTabWidget() myTabWidget.setTabP…

么样才能用最便捷的方式为Mac提速呢?

Mac是现代人日常工作时必不可少的工具,尤其是在居家办公已经屡见不鲜的当下。视频会议、文档传送、视频剪辑等等。它在工作中扮演的角色越来越重要,所以也导致了它的流畅程度可以在很大程度上影响人们一整天的工作效率和心情。 但是影响Mac的运行和响应速…

Gitlab的流水线任务【实现每小时自动测试 dev分支的更新】

背景 在现代软件开发实践中,持续集成(Continuous Integration, CI)是确保代码质量和快速响应软件缺陷的关键策略。GitLab 提供了强大的 CI/CD 功能,允许开发者自动化测试和部署流程。本文将介绍如何设置 GitLab 流水线计划任务&a…

如何使用Android平板公网访问本地Linux code-server

文章目录 1.ubuntu本地安装code-server2. 安装cpolar内网穿透3. 创建隧道映射本地端口4. 安卓平板测试访问5.固定域名公网地址6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以,这里以VMwhere ubuntu系统为例 下载code server服务,浏览器…

网络: 数据链路层

数据链路层: 数据帧的封装与传输 以太网数据帧 源地址和目的地址是指网卡的硬件地址(也叫MAC地址), 长度是48位,是在网卡出厂时固化的;帧协议类型字段有三种值,分别对应IP、ARP、RARP;帧末尾是CRC校验码 以太网 "以太网" 不是一种具体的网络, 而是一种技术标准; 既…

[项目前置]如何用webbench进行压力测试

测试软件 采用webbench进行服务器性能测试。 Webbench是知名的网站压力测试工具,它是由Lionbridge公司开发。 webbench的标准测试可以向我们展示服务器的两项内容: 每秒钟相应请求数 和 每秒钟传输数据量 webbench测试原理是,创建指定数…

Prompt进阶系列5:LangGPT(提示链Prompt Chain)--提升模型鲁棒性

Prompt进阶系列5:LangGPT(提示链Prompt Chain)–提升模型鲁棒性 随着对大模型的应用实践的深入,许多大模型的使用者, Prompt 创作者对大模型的应用越来越得心应手。和 Prompt 有关的各种学习资料,各种优质内容也不断涌现。关于 Prompt 的实践…

微服务day05(上) - Elasticsearch

1.1.了解ES 1.1.1.elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎,具备非常多强大功能,可以帮助我们从海量数据中快速找到需要的内容 例如: 在GitHub搜索代码 在电商网站搜索商品 在百度搜索答案 在打车软件搜索附近的…

哈希、散列表和Rabin-Karp算法

字典 现有一个抽象数据类型(ADT)如下: 包括了一组元素,每个元素都有一个键key。假设没有元素拥有相同的key,如果有相同的key,则覆盖掉原有key的元素。 -insert(item) -delete(item) -search(key):根据给定的key,返…

Python:熟悉简单的skfuzzy构建接近生活事件的模糊控制器”(附带详细注释说明)+ 测试结果

参考资料:https: // blog.csdn.net / shelgi / article / details / 126908418 ————通过下面这个例子,终于能理解一点模糊理论的应用了,感谢原作。 熟悉简单的skfuzzy构建接近生活事件的模糊控制器 假设下面这样的场景, 我们希望构建一套…

苍穹外卖-day02

1. 新增员工 1.1 需求分析和设计 注意事项: 账号必须是唯一的手机号为合法的11位手机号码身份证号为合法的18位身份证号码密码默认为123456 本项目约定: 管理端发出的请求,统一使用**/admin**作为前缀。用户端发出的请求,统一使用…

没有磁盘整列下的多机分布式存储:使用rysnc+多服务器文件/文件夹内容同步

目录 0.为什么要定时同步 1.程序安装 2.文件夹设置rsync使用 3.使用cron进行定时任务 0.为什么要定时同步 作为科研党,实验室有多个服务器,但是都是分批买的没有上磁盘整列,所以一个服务器上跑的东西并不能同步,有时候挂任务要…

四川宏博蓬达法律咨询有限公司:法律服务安全的新标杆

在这个法治社会,法律服务行业扮演着越来越重要的角色。四川宏博蓬达法律咨询有限公司,作为行业内的佼佼者,始终坚持以客户为中心,为客户提供专业、高效、安全的法律服务。 一、公司背景与实力展示 四川宏博蓬达法律咨询有限公司自…

C语言例3-26:逗号表达式的例子

逗号表达式&#xff1a; 表达式1&#xff0c;表达式2 表达式可以是算术表达式、关系表达式、逻辑表达式、条件表达式、赋值表达式和逗号表达式。 代码如下&#xff1a; #include<stdio.h> int main(void) {int i1,j;float f2.0f;char chb; //b(98)// printf(&…

开源项目ChatGPT-Next-Web的容器化部署(二)-- jenkins CI构建并推送镜像

一、背景 接着上文已制作好了Dockerfile&#xff0c;接下来就是docker build/tag/push等一系列操作了。 不过在这之前&#xff0c;你还必须在jenkins等CI工具中&#xff0c;拉取源码&#xff0c;然后build构建应用。 因为本文的重点不是讲述jenkins ci工具&#xff0c;所以只…

Win10中IIS服务如何部署c#服务

1、将项目打包发布 注意发布位置 2、打开搜索搜索计算机管理 3、点击服务和应用程序 4、点击internet information service 5、点击网站再点击添加网站 6、添加网站名称&#xff1a;opm 添加网站路径&#xff08;即刚才发布路径&#xff09; 输入ip地址&#xff1a;自己…

PyTorch深度学习:如何实现遥感影像的自动化地物分类?

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…