鸿蒙界面开发（七）：媒体查询

媒体查询

为什么媒体查询在构建布局这一章呢？
媒体查询常用于下面两种场景：

1. 针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。

引入与使用流程——mediaquery模块接口

媒体查询通过mediaquery模块接口，设置查询条件并绑定回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑，实现页面的响应式设计。具体步骤如下：

1. 首先导入媒体查询模块。

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

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

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

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

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）
场景示例