概述

媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景：

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

我开发的 Demo 展示

以下代码均经过我 demo 的实战验证，确保代码和效果对应

引入与使用流程

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

首先导入媒体查询模块。

import mediaquery from '@ohos.mediaquery';

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