HarmonyOSNext_API16_媒体查询_鸿蒙api16

媒体查询条件详解

媒体查询是响应式设计的核心工具，通过判断设备特征动态调整界面样式。其完整规则由媒体类型、逻辑操作符和媒体特征三部分组成，具体解析如下：

---

一、媒体查询语法结构

基本格式：
[媒体类型] [逻辑操作符] (媒体特征)

• 媒体类型：可选，默认screen（屏幕设备）。
• 逻辑操作符：组合多个条件（如and、or）。
• 媒体特征：具体判断条件，用( )包裹。

示例：

• screen and (width >= 600px) → 屏幕设备且宽度≥600像素时生效。
• (dark-mode: true) → 深色模式时生效（省略媒体类型，默认为screen）。

---

二、媒体类型（Media Type）

类型 说明 screen 屏幕设备（默认），如手机、平板、电脑。

规则：

• 若需指定非屏幕设备（如打印机），需显式声明（如print and (条件)。
• 未声明时，默认所有条件仅针对屏幕设备。

---

三、逻辑操作符（Logic Operators）

用于组合多个条件，形成复杂查询逻辑：

操作符 作用 示例 and 所有条件同时满足时生效 (width >= 600px) and (dark-mode: true) → 宽屏且深色模式生效。 or 任一条件满足时生效 (width < 300px) or (height < 300px) → 宽度或高度小于300像素时生效。 not 否定整个条件（需搭配screen） not screen and (device-type: tv) → 非电视设备时生效。 only 兼容旧设备（实际效果等同screen） only screen and (width <= 500px) → 仅屏幕设备且宽度≤500像素时生效。 , 等同or，但优先级更低 (width >= 1000px), (device-type: tablet) → 宽屏或平板设备时生效。

注意事项：

• not和only必须与screen一起使用。
• 逗号,优先级低于and，建议用括号明确逻辑分组。

---

四、范围操作符（Range Operators）

用于数值型媒体特征（如宽度、高度）：

操作符 说明 示例 <= 小于等于 (height <= 800px) >= 大于等于 (width >= 600vp) < 小于 (resolution < 2dppx) > 大于 (min-device-width > 720px)

---

五、媒体特征（Media Features）

定义具体判断条件，覆盖设备类型、屏幕状态、环境模式等：

1. 尺寸与方向

特征 说明 示例 width/height 应用窗口的宽/高（支持vp/px） (width >= 600vp) → 窗口宽度≥600虚拟像素。 min-width 窗口最小宽度 (min-width: 768px) → 窗口宽度≥768像素时生效。 orientation 屏幕方向（portrait竖屏/landscape横屏） (orientation: landscape) → 横屏生效。

2. 设备属性

特征 说明 示例 device-type 设备类型（如phone、tablet） (device-type: wearable) → 智能穿戴设备生效。 round-screen 是否圆形屏幕 (round-screen: true) → 圆形屏幕生效。 resolution 设备分辨率（dpi/dppx/dpcm） (resolution >= 300dpi) → 高分辨率设备生效。

3. 环境模式

特征 说明 示例 dark-mode 深色模式（true/false） (dark-mode: true) → 深色模式生效。

4. 特殊限制（鸿蒙系统）

• 卡片中仅支持：height、width。
• 设备宽度固定：device-width在应用初始化后不更新（如折叠屏展开时不刷新）。

---

六、综合应用场景

1. 横竖屏适配

2. 深色模式适配

3. 多设备适配

---

七、避坑指南

1. 避免循环依赖

   • ❌ 错误：组件A依赖B的位置，B又依赖A → 布局无法计算。

2. 动态内容更新

   • 组件尺寸变化时（如文字增多），需手动触发重排：

3. 性能优化

   • 避免在媒体查询中频繁加载资源（如图片）。
   • 使用min-width/max-width替代固定宽度，增强灵活性。

---

import { mediaquery, window } from \'@kit.ArkUI\';import { common } from \'@kit.AbilityKit\';@Entry@Componentstruct MediaQueryExample { @State color: string = \'#DB7093\'; @State text: string = \'Portrait\'; // 当设备横屏时条件成立 listener:mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync(\'(orientation: landscape)\'); // 当满足媒体查询条件时，触发回调 onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) { if (mediaQueryResult.matches as boolean) { // 若设备为横屏状态，更改相应的页面布局 this.color = \'#FFD700\'; this.text = \'Landscape\'; } else { this.color = \'#DB7093\'; this.text = \'Portrait\'; } } aboutToAppear() { // 绑定当前应用实例 // 绑定回调函数 this.listener.on(\'change\', (mediaQueryResult: mediaquery.MediaQueryResult) => { this.onPortrait(mediaQueryResult) }); } aboutToDisappear() { // 解绑listener中注册的回调函数 this.listener.off(\'change\'); } // 改变设备横竖屏状态函数 private changeOrientation(isLandscape: boolean) { // 获取UIAbility实例的上下文信息 let context:common.UIAbilityContext = this.getUIContext().getHostContext() 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%\') }}

总结：
媒体查询通过设备类型+逻辑符+特征条件的组合，实现“一码多端”的响应式适配。掌握其规则后，可高效适配不同设备尺寸、方向、主题模式，但需注意逻辑严谨性、性能优化和系统限制（如鸿蒙卡片仅支持宽高）。