1# 媒体查询 2 3> **说明：** 4> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6 7## 导入模块 8 9```js 10import mediaquery from '@ohos.mediaquery' 11``` 12 13 14## 权限 15 16无 17 18 19## mediaquery.matchMediaSync 20 21matchMediaSync(condition: string): MediaQueryListener 22 23设置媒体查询的查询条件，并返回对应的监听句柄。 24 25**系统能力：** SystemCapability.ArkUI.ArkUI.Full 26 27**参数：** 28| 参数名 | 类型 | 必填 | 说明 | 29| --------- | ------ | ---- | ---------------------------------------- | 30| condition | string | 是 | 媒体事件的匹配条件，具体可参考[媒体查询语法规则](../../ui/ui-ts-layout-mediaquery.md#媒体查询条件语法规则)。 | 31 32**返回值：** 33| 类型 | 说明 | 34| ------------------ | ---------------------- | 35| MediaQueryListener | 媒体事件监听句柄，用于注册和去注册监听回调。 | 36 37**示例：** 38 ```js 39let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 40 ``` 41 42 43## MediaQueryListener 44 45媒体查询的句柄，并包含了申请句柄时的首次查询结果。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49### 属性 50 51| 名称 | 参数类型 | 可读 | 可写 | 说明 | 52| ------- | ------- | ---- | ---- | ---------- | 53| matches | boolean | 是 | 否 | 是否符合匹配条件。 | 54| media | string | 是 | 否 | 媒体事件的匹配条件。 | 55 56 57### on 58 59on(type: 'change', callback: Callback<MediaQueryResult>): void 60 61通过句柄向对应的查询条件注册回调，当媒体属性发生变更时会触发该回调。 62 63**系统能力：** SystemCapability.ArkUI.ArkUI.Full 64 65**参数：** 66| 参数名 | 类型 | 必填 | 说明 | 67| -------- | -------------------------------- | ---- | ---------------- | 68| type | string | 是 | 必须填写字符串'change'。 | 69| callback | Callback<MediaQueryResult> | 是 | 向媒体查询注册的回调 | 70 71**示例：** 72 详见[off示例](#off)。 73 74 75### off 76 77off(type: 'change', callback?: Callback<MediaQueryResult>): void 78 79通过句柄向对应的查询条件去注册回调，当媒体属性发生变更时不在触发指定的回调。 80 81**系统能力：** SystemCapability.ArkUI.ArkUI.Full 82 83**参数：** 84| 参数名 | 类型 | 必填 | 说明 | 85| -------- | -------------------------------- | ---- | ----------------------------- | 86| type | boolean | 是 | 必须填写字符串'change'。 | 87| callback | Callback<MediaQueryResult> | 否 | 需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。 | 88 89**示例：** 90 ```ts 91 import mediaquery from '@ohos.mediaquery' 92 93 let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 94 function onPortrait(mediaQueryResult) { 95 if (mediaQueryResult.matches) { 96 // do something here 97 } else { 98 // do something here 99 } 100 } 101 listener.on('change', onPortrait) // 注册回调 102 listener.off('change', onPortrait) // 去注册回调 103 ``` 104 105 106## MediaQueryResult 107 108 109### 属性 110 111| 名称 | 参数类型 | 可读 | 可写 | 说明 | 112| ------- | ------- | ---- | ---- | ---------- | 113| matches | boolean | 是 | 否 | 是否符合匹配条件。 | 114| media | string | 是 | 否 | 媒体事件的匹配条件。 | 115 116 117### 示例 118 119```ts 120import mediaquery from '@ohos.mediaquery' 121 122@Entry 123@Component 124struct MediaQueryExample { 125 @State color: string = '#DB7093' 126 @State text: string = 'Portrait' 127 listener = mediaquery.matchMediaSync('(orientation: landscape)') 128 129 onPortrait(mediaQueryResult) { 130 if (mediaQueryResult.matches) { 131 this.color = '#FFD700' 132 this.text = 'Landscape' 133 } else { 134 this.color = '#DB7093' 135 this.text = 'Portrait' 136 } 137 } 138 139 aboutToAppear() { 140 let portraitFunc = this.onPortrait.bind(this) //bind current js instance 141 this.listener.on('change', portraitFunc) 142 } 143 144 build() { 145 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 146 Text(this.text).fontSize(24).fontColor(this.color) 147 } 148 .width('100%').height('100%') 149 } 150} 151```