HarmonyOS应用开发：响应式布局-媒体查询
一、导入模块
import mediaquery from '@ohos.mediaquery'二、设置媒体查询条件，并保存返回的条件监听句柄
listener = mediaquery.matchMediaSync('(orientation: landscape)')三、通过条件监听句柄listener去注册回调函数
onPortrait(mediaQueryResult) { if (mediaQueryResult.matches) { // do something here } else { // do something here }}listener.on('change', onPortrait)媒体类型(media-type)
| 类型 | 说明 |
|---|---|
| screen | 按屏幕相关参数进行媒体查询。 |
媒体查询条件语法规则
[media-type] [and|not|only] [(media-feature)]媒体逻辑操作
and、or、not、only用于构成复杂媒体查询，也可以通过comma（,）将其组合起来
在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了=，操作符。
| 类型 | 说明 |
|---|---|
| <= | 小于等于，例如：screen and (50 <= height)。 |
| >= | 大于等于，例如：screen and (600 >= height)。 |
| < | 小于，例如：screen and (50 < height)。 |
| > | 大于，例如：screen and (600 > height)。 |
媒体特征(media-feature)
| 类型 | 说明 |
|---|---|
| height | 应用页面显示区域的高度。 |
| min-height | 应用页面显示区域的最小高度。 |
| max-height | 应用页面显示区域的最大高度。 |
| width | 应用页面显示区域的宽度。 |
| min-width | 应用页面显示区域的最小宽度。 |
| max-width | 应用页面显示区域的最大宽度。 |
| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中： - dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm； - dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi； - dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。 |
| min-resolution | 设备的最小分辨率。 |
| max-resolution | 设备的最大分辨率。 |
| orientation | 屏幕的方向。 可选值： - orientation: portrait（设备竖屏） - orientation: landscape（设备横屏） |
| device-height | 设备的高度。 |
| min-device-height | 设备的最小高度。 |
| max-device-height | 设备的最大高度。 |
| device-width | 设备的宽度。 |
| min-device-width | 设备的最小宽度。 |
| max-device-width | 设备的最大宽度。 |
| round-screen | 屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。 |
| dark-mode | 系统为深色模式时为true，否则为false。 |
场景示例
通过使用媒体查询实现当屏幕发生横竖屏切换，给页面文本应用不同的内容和样式。
import mediaquery from '@ohos.mediaquery'let portraitFunc = null@Entry@Componentstruct MediaQueryExample { @State color: string = '#DB7093' @State text: string = 'Portrait' @State fontSize: number = 24 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) // 绑定当前应用实例 this.listener.on('change', portraitFunc) } build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text(this.text).fontSize(50).fontColor(this.color) } .width('100%').height('100%') }}