# Media Query >![](../../public_sys-resources/icon-note.gif) **NOTE:** >This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ## Modules to Import ``` import mediaquery from '@ohos.mediaquery' ``` ## Required Permissions None ## mediaquery.matchMediaSync matchMediaSync\(condition: string\): MediaQueryListener Sets the media query criteria and returns the corresponding listening handle. - Parameters

Name	Type	Mandatory	Description
condition	string	Yes	Matching condition of a media event. For details about the condition string format, see Media Query.

- Return values

Type	Description
MediaQueryListener	Listening handle to a media event, which is used to register or unregister the listening callback.

- Example ``` listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listen to landscape events. ``` ## MediaQueryListener Media query handle, including the first query result when the handle is applied for. ### Attributes

Name	Type	Readable	Writable	Description
matches	boolean	Yes	No	Whether the match condition is met.
media	string	Yes	No	Matching condition of a media event.

### on on\(type: 'change', callback: Callback\): void Registers a callback with the corresponding query condition by using the handle. This callback is triggered when the media attributes change. - Parameters

Name	Type	Mandatory	Description
type	string	Yes	Must enter the string change.
callback	Callback<MediaQueryResult>	Yes	Callback registered with media query.

- Example For details, see the [off example](#li16426122219256). ### off off\(type: 'change', callback?: Callback\): void Unregisters a callback with the corresponding query condition by using the handle, so that no callback is triggered when the media attributes change. - Parameters

Name	Type	Mandatory	Description
type	boolean	Yes	Must enter the string change.
callback	Callback<MediaQueryResult>	No	Callback to be unregistered. If the default value is used, all callbacks of the handle are unregistered.

- Example ``` listener = mediaquery.matchMediaSync('(orientation: landscape)'); // Listens to landscape events. onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { // do something here } else { // do something here } } listener.on('change', onPortrait) // Register a callback. listener.off('change', onPortrait) // Unregister a callback. ``` ## MediaQueryResult ### Attributes

Name	Type	Readable	Writable	Description
matches	boolean	Yes	No	Whether the match condition is met.
media	string	Yes	No	Matching condition of a media event.

### Example ``` import mediaquery from '@ohos.mediaquery' let portraitFunc = null @Entry @Component struct MediaQueryExample { @State color: string = '#DB7093' @State text: string = 'Portrait' listener = mediaquery.matchMediaSync('(orientation: landscape)') onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { this.color = '#FFD700' this.text = 'Landscape' } else { this.color = '#DB7093' this.text = 'Portrait' } } aboutToAppear() { portraitFunc = this.onPortrait.bind(this) //bind current js instance this.listener.on('change', portraitFunc) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text(this.text).fontSize(24).fontColor(this.color) } .width('100%').height('100%') } } ``` ![](figures/mediaquery.gif)