1# @ohos.mediaquery (Media Query) 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> This module cannot be used in the file declaration of the [UIAbility](./js-apis-app-ability-uiAbility.md). In other words, the APIs of this module can be used only after a component instance is created; they cannot be called in the lifecycle of the UIAbility. 10> 11> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext). 12> 13> Since API version 10, you can use the [getMediaQuery](./js-apis-arkui-UIContext.md#getmediaquery) API in [UIContext](./js-apis-arkui-UIContext.md#uicontext) to obtain the [MediaQuery](./js-apis-arkui-UIContext.md#mediaquery) object associated with the current UI context. 14 15 16## Modules to Import 17 18```ts 19import mediaquery from '@ohos.mediaquery' 20``` 21 22 23## mediaquery.matchMediaSync 24 25matchMediaSync(condition: string): MediaQueryListener 26 27Sets the media query condition. This API returns the corresponding media query listener. 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31**Parameters** 32 33| Name | Type | Mandatory| Description | 34| --------- | ------ | ---- | ------------------------------------------------------------ | 35| condition | string | Yes | Media query condition. For details, see [Syntax](../../ui/arkts-layout-development-media-query.md#syntax).| 36 37**Return value** 38 39| Type | Description | 40| ------------------ | -------------------------------------------- | 41| [MediaQueryListener](#mediaquerylistener) | Media query listener, which is used to register or deregister the listening callback.| 42 43**Example** 44 45```ts 46import mediaquery from '@ohos.mediaquery' 47let listener:mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events. 48``` 49 50 51## MediaQueryListener 52 53Implements the media query listener, including the first query result when the listener is applied for. The specified media query condition, for example, **'(width <= 600vp)'**, is compared system information. If related information is not initialized during the first query, **matches** returns **false**. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57### Attributes 58 59| Name | Type | Readable| Writable| Description | 60| ------- | ------- | ---- | ---- | -------------------- | 61| matches | boolean | Yes | No | Whether the media query condition is met. | 62| media | string | Yes | No | Media query condition.| 63 64 65### on 66 67on(type: 'change', callback: Callback<MediaQueryResult>): void 68 69Registers a media query listener. The callback is triggered when the media attributes change. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73**Parameters** 74 75| Name | Type | Mandatory| Description | 76| -------- | -------------------------------- | ---- | ------------------------ | 77| type | string | Yes | Listener type. The value is fixed at **'change'**.| 78| callback | Callback<MediaQueryResult> | Yes | Callback registered with media query. | 79 80**Example** 81 82 For details, see [off Example](#off). 83 84 85### off 86 87off(type: 'change', callback?: Callback<MediaQueryResult>): void 88 89Deregisters a media query listener, so that no callback is triggered when the media attributes change. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93**Parameters** 94 95| Name | Type | Mandatory| Description | 96| -------- | -------------------------------- | ---- | ---------------------------------------------------------- | 97| type | string | Yes | Listener type. The value is fixed at **'change'**. | 98| callback | Callback<[MediaQueryResult](#mediaqueryresult)> | No | Callback to be deregistered. If the default value is used, all callbacks of the handle are deregistered.| 99 100**Example** 101 102 ```ts 103 import mediaquery from '@ohos.mediaquery' 104 105 let listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen for landscape events. 106 function onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) { 107 if (mediaQueryResult.matches) { 108 // do something here 109 } else { 110 // do something here 111 } 112 } 113 listener.on('change', onPortrait) // Register the media query listener. 114 listener.off('change', onPortrait) // Deregister the media query listener. 115 ``` 116 117## MediaQueryResult 118 119Provides the media query result. 120 121**System capability**: SystemCapability.ArkUI.ArkUI.Full 122 123 124### Attributes 125 126| Name | Type | Readable| Writable| Description | 127| ------- | ------- | ---- | ---- | -------------------- | 128| matches | boolean | Yes | No | Whether the media query condition is met. | 129| media | string | Yes | No | Media query condition.| 130 131 132### Example 133 134```ts 135import mediaquery from '@ohos.mediaquery' 136 137 138@Entry 139@Component 140struct MediaQueryExample { 141 @State color: string = '#DB7093' 142 @State text: string = 'Portrait' 143 listener = mediaquery.matchMediaSync('(orientation: landscape)') 144 145 onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) { 146 if (mediaQueryResult.matches) { 147 this.color = '#FFD700' 148 this.text = 'Landscape' 149 } else { 150 this.color = '#DB7093' 151 this.text = 'Portrait' 152 } 153 } 154 155 aboutToAppear() { 156 let portraitFunc = (mediaQueryResult:mediaquery.MediaQueryResult):void=>this.onPortrait(mediaQueryResult) // bind current js instance 157 this.listener.on('change', portraitFunc) 158 } 159 160 build() { 161 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 162 Text(this.text).fontSize(24).fontColor(this.color) 163 } 164 .width('100%').height('100%') 165 } 166} 167``` 168