1# @ohos.mediaquery (媒体查询) 2 3提供根据不同媒体类型定义不同的样式。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 导入模块 11 12```js 13import mediaquery from '@ohos.mediaquery' 14``` 15 16 17## mediaquery.matchMediaSync 18 19matchMediaSync(condition: string): MediaQueryListener 20 21设置媒体查询的查询条件，并返回对应的监听句柄。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| --------- | ------ | ---- | ---------------------------------------- | 29| condition | string | 是 | 媒体事件的匹配条件，具体可参考[媒体查询语法规则](../../ui/arkts-layout-development-media-query.md#语法规则)。 | 30 31**返回值：** 32 33| 类型 | 说明 | 34| ------------------ | ---------------------- | 35| MediaQueryListener | 媒体事件监听句柄，用于注册和去注册监听回调。 | 36 37**示例：** 38 39```js 40let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 41``` 42 43 44## MediaQueryListener 45 46媒体查询的句柄，并包含了申请句柄时的首次查询结果。 47 48**系统能力：** SystemCapability.ArkUI.ArkUI.Full 49 50### 属性 51 52| 名称 | 类型 | 可读 | 可写 | 说明 | 53| ------- | ------- | ---- | ---- | -------------------- | 54| matches | boolean | 是 | 否 | 是否符合匹配条件。 | 55| media | string | 是 | 否 | 媒体事件的匹配条件。 | 56 57 58### on 59 60on(type: 'change', callback: Callback<MediaQueryResult>): void 61 62通过句柄向对应的查询条件注册回调，当媒体属性发生变更时会触发该回调。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66**参数：** 67 68| 参数名 | 类型 | 必填 | 说明 | 69| -------- | -------------------------------- | ---- | ---------------- | 70| type | string | 是 | 必须填写字符串'change'。 | 71| callback | Callback<MediaQueryResult> | 是 | 向媒体查询注册的回调 | 72 73**示例：** 74 75 详见[off示例](#off)。 76 77 78### off 79 80off(type: 'change', callback?: Callback<MediaQueryResult>): void 81 82通过句柄向对应的查询条件去注册回调，当媒体属性发生变更时不在触发指定的回调。 83 84**系统能力：** SystemCapability.ArkUI.ArkUI.Full 85 86**参数：** 87 88| 参数名 | 类型 | 必填 | 说明 | 89| -------- | -------------------------------- | ---- | ---------------------------------------------------------- | 90| type | string | 是 | 必须填写字符串'change'。 | 91| callback | Callback<MediaQueryResult> | 否 | 需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。 | 92 93**示例：** 94 95 ```js 96 import mediaquery from '@ohos.mediaquery' 97 98 let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 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) // 注册回调 107 listener.off('change', onPortrait) // 去注册回调 108 ``` 109 110## MediaQueryResult 111 112用于执行媒体查询操作。 113 114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 115 116 117### 属性 118 119| 名称 | 类型 | 可读 | 可写 | 说明 | 120| ------- | ------- | ---- | ---- | -------------------- | 121| matches | boolean | 是 | 否 | 是否符合匹配条件。 | 122| media | string | 是 | 否 | 媒体事件的匹配条件。 | 123 124 125### 示例 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 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```