HarmonyOSNext_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
@Component
struct 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%')
  }
}

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