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