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