1# @system.mediaquery (Media Query) 2 3The **mediaquery** module provides different styles for different media types. 4 5 6> **NOTE** 7> 8> - The APIs of this module are no longer maintained since API version 7. You are advised to use [`@ohos.mediaquery`](js-apis-mediaquery.md) instead. 9> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version. 10 11 12## Modules to Import 13 14 15```ts 16import mediaquery from '@system.mediaquery'; 17``` 18 19 20## mediaquery.matchMedia 21 22matchMedia(condition: string): MediaQueryList 23 24Creates a **MediaQueryList** object based on the query condition. 25 26**System capability**: SystemCapability.ArkUI.ArkUI.Full 27 28**Parameters** 29 30| Name | Type | Mandatory | Description | 31| --------- | ------ | ---- | -------- | 32| condition | string | Yes | Query condition.| 33 34**Return value** 35 36| Type | Description | 37| -------------- | ---------------------------------------- | 38| MediaQueryList | Attributes of the **MediaQueryList** object created. For details, see **MediaQueryList** attributes.| 39 40**Example** 41 42```ts 43let mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); 44``` 45 46## MediaQueryEvent 47 48Defines a media query event. 49 50**System capability**: SystemCapability.ArkUI.ArkUI.Full 51 52| Name | Type | Mandatory | Description | 53| ------- | ------- | ---- | ----- | 54| matches | boolean | Yes | Matching result.| 55 56## MediaQueryList 57 58Defines a media query list. 59 60### Attributes 61 62**System capability**: SystemCapability.ArkUI.ArkUI.Full 63 64| Name | Type | Mandatory | Description | 65| ------- | ------- | ---- | ----------------- | 66| media | string | No | Serialized media query condition. This parameter is read-only.| 67| matches | boolean | Yes | Matching result. | 68 69### onchange 70 71onchange?: (matches: boolean) => void 72 73Called when the **matches** value changes. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77**Parameters** 78 79| Name | Type | Mandatory | Description | 80| ------- | ------- | ---- | -------------- | 81| matches | boolean | Yes | New **matches** value.| 82 83 84### MediaQueryList.addListener 85 86addListener(callback: (event: MediaQueryEvent) => void): void 87 88Adds a listener for this **MediaQueryList** object. The listener must be added before **onShow** is called, that is, it must be added in the **onInit** or **onReady** API. 89 90**System capability**: SystemCapability.ArkUI.ArkUI.Full 91 92**Parameters** 93 94| Name | Type | Mandatory | Description | 95| -------- | -------------------------------- | ---- | -------------- | 96| callback | (event: MediaQueryEvent) => void | Yes | Callback invoked when the query condition changes.| 97 98**Example** 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 117Removes the listener for this **MediaQueryList** object. 118 119**System capability**: SystemCapability.ArkUI.ArkUI.Full 120 121**Parameters** 122 123| Name | Type | Mandatory | Description | 124| -------- | --------------------------------- | ---- | -------------- | 125| callback | (event: MediaQueryEvent) => void) | Yes | Callback invoked when the query condition changes.| 126 127**Example** 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``` 140