纯血鸿蒙ArkUI媒体查询详解

媒体查询概要

媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可以根据不同设备类型或同设备不同状态修改应用的样式。

媒体查询常用于下列两种场景：

1. 针对设备和应用的属性信息（比如显示区域、深浅色、分辨率等），设计出匹配的布局；

2. 当屏幕发生动态改变时（如分屏、横竖屏切换），同步更新应用的页面布局。

引入与使用流程

媒体查询通过mediaquery模块接口，设置查询条件并绑定回调函数，任一媒体特征改变时，均会触发回调函数，返回匹配结果，根据返回值更改页面布局或者实现业务逻辑，实现页面的响应式设计。

具体步骤如下：

媒体查询通过mediaquery模块接口，设置查询条件并绑定回调函数。当任意媒体特征改变时，都会触发回调函数，返回匹配的结果，根据返回值更改页面布局或者实现业务逻辑，实现页面的响应式设计。

具体步骤如下：

1. 导入媒体查询模块：

import { mediaquery } from '@kit.ArkUI';

2. 通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄监听器。例如监听横屏事件：

let listener: mediaquery.MediaQueryListener = 
    mediaquery.matchMediaSync('(orientation: landscape)');

3. 给条件监听句柄监听器绑定回调函数 onPortrait，当监听器检测设备变化时执行回调函数。在回调函数中，根据不同设备状态更改页面布局或者实现业务逻辑：

onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) {
  if (mediaQueryResult.matches as boolean) {
    // do something here
  } else {
    // do something here
  }
}

listener.on('change', onPortrait);

媒体查询条件

媒体查询条件由媒体类型、逻辑操作符、媒体特征组成，其中媒体类型可省略，逻辑操作符用于连接不同媒体类型与媒体特征，其中，媒体特征要使用“()”包裹且可以有多个。

语法规则

语法规则包括媒体类型（media-type）、媒体逻辑操作（media-logic-operations）和媒体特征（media-feature）。

[media-type] [media-logic-operations] [(media-feature)]

例如：

• screen and (round-screen: true) ：表示当设备屏幕是圆形时条件成立。

• (max-height: 800px) ：表示当高度小于等于800px时条件成立。

• (height <= 800px) ：表示当高度小于等于800px时条件成立。

• screen and (device-type: tv) or (resolution < 2) ：表示包含多个媒体特征的多条件复杂语句查询，当设备类型为tv或设备分辨率小于2时条件成立。

• (dark-mode: true) ：表示当系统为深色模式时成立。

媒体类型（media-type）

查询条件未写媒体类型时，默认为screen。媒体类型必须写在查询条件开头。

媒体逻辑操作（media-logic-operations）

媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过英文逗号将其组合起来，具体情况如下表所示。

​

媒体逻辑操作符

​

媒体范围操作符包括<=，>=，<，>，具体情况如下表所示。

​

媒体逻辑范围操作符

​

媒体特征（media-feature）

媒体特征包括应用显示区域的宽高、设备分辨率以及设备的宽高等属性，详细说明如下表。

表3 媒体特征说明表

比较height、width等宽高尺寸时，支持vp和px单位，无单位默认为px。

说明：

目前在卡片中使用媒体查询，只支持height、width。

场景示例

下例中使用媒体查询，实现屏幕横竖屏切换时，给页面文本应用添加不同的内容和样式。

Stage模型下的示例：

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) => {
      // 一旦发生横竖屏切换，则调用onPortrait方法进行处理
      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%')
  }
}