1# @system.mediaquery (媒体查询) 2 3提供根据不同媒体类型定义不同的样式。 4 5 6> **说明：** 7> 8> - 从API Version 7 开始，该接口不再维护，推荐使用新接口[`@ohos.mediaquery`](js-apis-mediaquery.md)。 9> - 本模块首批接口从API version 3开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。 10 11 12## 导入模块 13 14 15```ts 16import mediaquery from '@system.mediaquery'; 17``` 18 19 20## mediaquery.matchMedia 21 22matchMedia(condition: string): MediaQueryList 23 24根据媒体查询条件，创建MediaQueryList对象。 25 26**系统能力：** SystemCapability.ArkUI.ArkUI.Full 27 28**参数：** 29 30| 参数名 | 类型 | 必填 | 说明 | 31| --------- | ------ | ---- | -------- | 32| condition | string | 是 | 用于查询的条件。 | 33 34**返回值：** 35 36| 参数类型 | 说明 | 37| -------------- | ---------------------------------------- | 38| MediaQueryList | 表示创建MediaQueryList对象的属性，详情见下表 MediaQueryList说明。 | 39 40**示例：** 41 42```ts 43let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); 44``` 45 46## MediaQueryEvent 47 48定义MediaQuery事件。 49 50**系统能力：** SystemCapability.ArkUI.ArkUI.Full 51 52| 名称 | 类型 | 必填 | 说明 | 53| ------- | ------- | ---- | ----- | 54| matches | boolean | 是 | 匹配结果。 | 55 56## MediaQueryList 57 58定义MediaQuery列表信息。 59 60### 属性 61 62**系统能力：** 以下各项对应的系统能力均为SystemCapability.ArkUI.ArkUI.Full 63 64| 名称 | 类型 | 必填 | 说明 | 65| ------- | ------- | ---- | ----------------- | 66| media | string | 否 | 序列化媒体查询条件，该参数为只读。 | 67| matches | boolean | 是 | 匹配结果。 | 68 69### onchange 70 71onchange?: (matches: boolean) => void 72 73matches状态变化时的执行函数。 74 75**系统能力：** SystemCapability.ArkUI.ArkUI.Full 76 77**参数：** 78 79| 参数名 | 类型 | 必填 | 说明 | 80| ------- | ------- | ---- | -------------- | 81| matches | boolean | 是 | matches状态变化时值。 | 82 83 84### MediaQueryList.addListener 85 86addListener(callback: (event: MediaQueryEvent) => void): void 87 88给MediaQueryList添加回调函数，回调函数应在onShow生命周期之前添加，即需要在onInit或onReady生命周期里添加。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92**参数：** 93 94| 参数名 | 类型 | 必填 | 说明 | 95| -------- | -------------------------------- | ---- | -------------- | 96| callback | (event: MediaQueryEvent) => void | 是 | 匹配条件发生变化的响应函数。 | 97 98**示例：** 99 100```ts 101import mediaquery, { MediaQueryEvent } from '@system.mediaquery'; 102let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); 103 104function maxWidthMatch(e: MediaQueryEvent): void { 105 if(e.matches){ 106 // do something 107 } 108} 109mMediaQueryList.addListener(maxWidthMatch); 110``` 111 112 113### MediaQueryList.removeListener 114 115removeListener(callback: (event: MediaQueryEvent) => void): void 116 117移除MediaQueryList中的回调函数。 118 119**系统能力：** SystemCapability.ArkUI.ArkUI.Full 120 121**参数：** 122 123| 参数名 | 类型 | 必填 | 说明 | 124| -------- | --------------------------------- | ---- | -------------- | 125| callback | (event: MediaQueryEvent) => void) | 是 | 匹配条件发生变化的响应函数。 | 126 127**示例：** 128 129```ts 130import mediaquery, { MediaQueryEvent } from '@system.mediaquery'; 131let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); 132 133function maxWidthMatch(e: MediaQueryEvent): void { 134 if(e.matches){ 135 // do something 136 } 137} 138mMediaQueryList.removeListener(maxWidthMatch); 139```