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在应用初始化后不更新（如折叠屏展开时不刷新）。

六、综合应用场景

横竖屏适配
深色模式适配
多设备适配

七、避坑指南

避免循环依赖
- ❌ 错误：组件A依赖B的位置，B又依赖A → 布局无法计算。
动态内容更新
- 组件尺寸变化时（如文字增多），需手动触发重排：
性能优化
- 避免在媒体查询中频繁加载资源（如图片）。
- 使用min-width/max-width替代固定宽度，增强灵活性。

ts 复制代码

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%')
  }
}

总结：

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