🚀一、mediaquery
🔎1.概述
媒体查询（mediaquery）它允许根据设备的不同特性（如屏幕大小、屏幕方向、分辨率、颜色深度等）来动态地调整网页的样式和布局。
通过媒体查询，可以为不同的设备定义不同的样式规则，以适应不同的屏幕大小和分辨率。这样就可以实现响应式设计，使页面在不同设备上表现一致、完美。例如，可以通过媒体查询设置某些元素在手机屏幕上隐藏，而在电脑屏幕上显示等。
媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。
媒体查询常用于下面应用场景：
🔎2.引入与使用流程
1、导入相关模块
import mediaquery from '@ohos.mediaquery';
复制代码
2、通过 matchMediaSync 接口设置媒体查询条件，保存返回的条件监听句柄 listener。例如监听横屏事件：
let listener = mediaquery.matchMediaSync('(orientation: landscape)');
复制代码
给条件监听句柄 listener 绑定回调函数 onPortrait，当 listener 检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑。
onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { // do something here } else { // do something here }}
listener.on('change', onPortrait);
复制代码
🔎3.媒体查询条件
🦋3.1 语法规则
[media-type] [media-logic-operations] [(media-feature)]
复制代码
例如：screen and (device-type: tv) or (resolution < 2) ：表示包含多个媒体特征的多条件复杂语句查询，当设备类型为 tv 或设备分辨率小于 2 时条件成立。
更多鸿蒙最新技术知识点，请关注作者博客：https://t.doruo.cn/14DjR1rEY
🦋3.2 媒体类型
screen 是一种媒体类型，用于匹配屏幕设备，包括计算机屏幕、移动设备屏幕和平板电脑等。在使用 screen 媒体类型时，可以为不同分辨率的屏幕应用不同的样式，从而优化 UI 的响应式设计。
🦋3.3 媒体逻辑操作
媒体逻辑操作符：and、or、not、only 用于构成复杂媒体查询，也可以通过 comma（, ）将其组合起来。
媒体范围操作符包括<=，>=，<，>用于比较媒体条件
🦋3.4 媒体特征
媒体查询中的媒体特征是用来描述设备的特定属性，以便在不同的视口和屏幕大小下应用不同的样式。
🔎4.案例
🦋4.1 Stage 模型
import mediaquery from '@ohos.mediaquery';import window from '@ohos.window';import common from '@ohos.app.ability.common';
let portraitFunc = null;
@Entry@Componentstruct MediaQueryExample { @State color: string = '#DB7093'; @State text: string = 'Portrait'; // 当设备横屏时条件成立 listener = mediaquery.matchMediaSync('(orientation: landscape)');
// 当满足媒体查询条件时，触发回调 onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { // 若设备为横屏状态，更改相应的页面布局 this.color = '#FFD700'; this.text = 'Landscape'; } else { this.color = '#DB7093'; this.text = 'Portrait'; } }
aboutToAppear() { // 绑定当前应用实例 portraitFunc = this.onPortrait.bind(this); // 绑定回调函数 this.listener.on('change', portraitFunc); }
// 改变设备横竖屏状态函数 private changeOrientation(isLandscape: boolean) { // 获取UIAbility实例的上下文信息 let context = getContext(this) as common.UIAbilityContext; // 调用该接口手动改变设备横竖屏状态 window.getLastWindow(context).then((lastWindow) => { lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT) }); } build() { Column({ space: 50 }) { Text(this.text).fontSize(50).fontColor(this.color) Text('Landscape').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { this.changeOrientation(true); }) Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { this.changeOrientation(false); }) } .width('100%').height('100%') }}
复制代码
🦋4.2 FA 模型
import mediaquery from '@ohos.mediaquery';import featureAbility from '@ohos.ability.featureAbility';
let portraitFunc = null;
@Entry@Componentstruct MediaQueryExample { @State color: string = '#DB7093'; @State text: string = 'Portrait'; listener = mediaquery.matchMediaSync('(orientation: landscape)'); // 当设备横屏时条件成立
onPortrait(mediaQueryResult) { // 当满足媒体查询条件时，触发回调 if (mediaQueryResult.matches) { // 若设备为横屏状态，更改相应的页面布局 this.color = '#FFD700'; this.text = 'Landscape'; } else { this.color = '#DB7093'; this.text = 'Portrait'; } }
aboutToAppear() { portraitFunc = this.onPortrait.bind(this); // 绑定当前应用实例 this.listener.on('change', portraitFunc); //绑定回调函数 }
build() { Column({ space: 50 }) { Text(this.text).fontSize(50).fontColor(this.color) Text('Landscape').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { let context = featureAbility.getContext(); context.setDisplayOrientation(0); //调用该接口手动改变设备横竖屏状态 }) Text('Portrait').fontSize(50).fontColor(this.color).backgroundColor(Color.Orange) .onClick(() => { let context = featureAbility.getContext(); context.setDisplayOrientation(1); //调用该接口手动改变设备横竖屏状态 }) } .width('100%').height('100%') }}
复制代码
🚀写在最后
评论