1# Media Query 2 3 4 5> **NOTE** 6> 7> - 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. 8> - 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. 9 10 11## Modules to Import 12 13 14``` 15import mediaquery from '@system.mediaquery'; 16``` 17 18 19## mediaquery.matchMedia 20 21matchMedia(condition: string): MediaQueryList 22 23Creates a **MediaQueryList** object based on the query condition. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27**Parameters** 28 29| Name | Type | Mandatory | Description | 30| --------- | ------ | ---- | -------- | 31| condition | string | Yes | Query condition.| 32 33**Return value** 34 35| Type | Description | 36| -------------- | ---------------------------------------- | 37| MediaQueryList | Attributes of the **MediaQueryList** object created. For details, see **MediaQueryList** attributes.| 38 39**Example** 40 41``` 42var mMediaQueryList = mediaquery.matchMedia('(max-width: 466)'); 43``` 44 45## MediaQueryEvent 46 47Defines a media query event. 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51| Name | Type | Mandatory | Description | 52| ------- | ------- | ---- | ----- | 53| matches | boolean | Yes | Matching result.| 54 55## MediaQueryList 56 57Defines a media query list. 58 59### Attributes 60 61**System capability**: SystemCapability.ArkUI.ArkUI.Full 62 63| Name | Type | Mandatory | Description | 64| ------- | ------- | ---- | ----------------- | 65| media | string | No | Serialized media query condition. This parameter is read-only.| 66| matches | boolean | Yes | Matching result. | 67 68### onchange 69 70onchange?: (matches: boolean) => void 71 72Called when the **matches** value changes. 73 74**System capability**: SystemCapability.ArkUI.ArkUI.Full 75 76**Parameters** 77 78| Name | Type | Mandatory | Description | 79| ------- | ------- | ---- | -------------- | 80| matches | boolean | Yes | New **matches** value.| 81 82 83### MediaQueryList.addListener 84 85addListener(callback: (event: MediaQueryEvent) => void): void 86 87Adds 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. 88 89**System capability**: SystemCapability.ArkUI.ArkUI.Full 90 91**Parameters** 92 93| Name | Type | Mandatory | Description | 94| -------- | -------------------------------- | ---- | -------------- | 95| callback | (event: MediaQueryEvent) => void | Yes | Callback invoked when the query condition changes.| 96 97**Example** 98 99``` 100function maxWidthMatch(){ 101 if(e.mathes){ 102 // do something 103 } 104} 105mMediaQueryList.addListener(maxWidthMatch); 106``` 107 108 109### MediaQueryList.removeListener 110 111removeListener(callback: (event: MediaQueryEvent) => void): void 112 113Removes the listener for this **MediaQueryList** object. 114 115**System capability**: SystemCapability.ArkUI.ArkUI.Full 116 117**Parameters** 118 119| Name | Type | Mandatory | Description | 120| -------- | --------------------------------- | ---- | -------------- | 121| callback | (event: MediaQueryEvent) => void) | Yes | Callback invoked when the query condition changes.| 122 123**Example** 124 125``` 126function maxWidthMatch(){ 127 if(e.mathes){ 128 // do something 129 } 130} 131mMediaQueryList.removeListener(maxWidthMatch); 132``` 133