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