• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.mediaquery
2
3The **mediaquery** module provides different styles for different media types.
4
5> **NOTE**
6>
7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## Modules to Import
11
12```js
13import mediaquery from '@ohos.mediaquery'
14```
15
16
17## mediaquery.matchMediaSync
18
19matchMediaSync(condition: string): MediaQueryListener
20
21Sets the media query condition. This API returns the corresponding media query listener.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name      | Type    | Mandatory  | Description                                      |
28| --------- | ------ | ---- | ---------------------------------------- |
29| condition | string | Yes   | Media query condition. For details, see [Syntax of Media Query Conditions](../../ui/arkts-layout-development-media-query.md#syntax).|
30
31**Return value**
32
33| Type                | Description                    |
34| ------------------ | ---------------------- |
35| MediaQueryListener | Media query listener, which is used to register or deregister the listening callback.|
36
37**Example**
38
39```js
40let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
41```
42
43
44## MediaQueryListener
45
46Implements the media query listener, including the first query result when the listener is applied for.
47
48**System capability**: SystemCapability.ArkUI.ArkUI.Full
49
50### Attributes
51
52| Name   | Type   | Readable| Writable| Description                |
53| ------- | ------- | ---- | ---- | -------------------- |
54| matches | boolean | Yes  | No  | Whether the media query condition is met.  |
55| media   | string  | Yes  | No  | Media query condition.|
56
57
58### on
59
60on(type: 'change', callback: Callback<MediaQueryResult>): void
61
62Registers the media query listener. The callback is triggered when the media attributes change.
63
64**System capability**: SystemCapability.ArkUI.ArkUI.Full
65
66**Parameters**
67
68| Name     | Type                              | Mandatory  | Description              |
69| -------- | -------------------------------- | ---- | ---------------- |
70| type     | string                           | Yes   | Listener type. The value is fixed at **'change'**.|
71| callback | Callback<MediaQueryResult> | Yes   | Callback registered with media query.      |
72
73**Example**
74
75  For details, see [off Example](#off).
76
77
78### off
79
80off(type: 'change', callback?: Callback<MediaQueryResult>): void
81
82Deregisters the media query listener, so that no callback is triggered when the media attributes change.
83
84**System capability**: SystemCapability.ArkUI.ArkUI.Full
85
86**Parameters**
87
88| Name  | Type                            | Mandatory| Description                                                      |
89| -------- | -------------------------------- | ---- | ---------------------------------------------------------- |
90| type     | string                           | Yes  | Listener type. The value is fixed at **'change'**.                                  |
91| callback | Callback<MediaQueryResult> | No  | Callback to be deregistered. If the default value is used, all callbacks of the handle are deregistered.|
92
93**Example**
94
95  ```js
96    import mediaquery from '@ohos.mediaquery'
97
98    let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events.
99    function onPortrait(mediaQueryResult) {
100        if (mediaQueryResult.matches) {
101            // do something here
102        } else {
103            // do something here
104        }
105    }
106    listener.on('change', onPortrait) // Register the media query listener.
107    listener.off('change', onPortrait) // Deregister the media query listener.
108  ```
109
110## MediaQueryResult
111
112Provides the media query result.
113
114**System capability**: SystemCapability.ArkUI.ArkUI.Full
115
116
117### Attributes
118
119| Name   | Type   | Readable| Writable| Description                |
120| ------- | ------- | ---- | ---- | -------------------- |
121| matches | boolean | Yes  | No  | Whether the media query condition is met.  |
122| media   | string  | Yes  | No  | Media query condition.|
123
124
125### Example
126
127```ts
128import mediaquery from '@ohos.mediaquery'
129
130
131@Entry
132@Component
133struct MediaQueryExample {
134  @State color: string = '#DB7093'
135  @State text: string = 'Portrait'
136  listener = mediaquery.matchMediaSync('(orientation: landscape)')
137
138  onPortrait(mediaQueryResult) {
139    if (mediaQueryResult.matches) {
140      this.color = '#FFD700'
141      this.text = 'Landscape'
142    } else {
143      this.color = '#DB7093'
144      this.text = 'Portrait'
145    }
146  }
147
148  aboutToAppear() {
149    let portraitFunc = this.onPortrait.bind(this) // Bind the current JS instance.
150    this.listener.on('change', portraitFunc)
151  }
152
153  build() {
154    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
155      Text(this.text).fontSize(24).fontColor(this.color)
156    }
157    .width('100%').height('100%')
158  }
159}
160```
161