【高心星出品】
响应式布局之媒体查询
媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式，常用于多屏幕的应用适配。媒体查询常用于下面两种场景：
针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。
媒体查询条件
符合媒体查询条件会触发屏幕的操作，比如在手机屏幕上布局如何显示，在平板屏幕上布局如何显示。
媒体查询条件由媒体类型、逻辑操作符、媒体特征组成，其中媒体类型可省略，逻辑操作符用于连接不同媒体类型与媒体特征，其中，媒体特征要使用“()”包裹且可以有多个。
语法规则包括媒体类型（media-type）、媒体逻辑操作（media-logic-operations）（经常省略）和媒体特征（media-feature）。
[media-type] [media-logic-operations] [(media-feature)]
复制代码
媒体类型（media-type）
查询条件未写媒体类型时，默认为 screen。媒体类型必须写在查询条件开头。
媒体特征（media-feature）
媒体特征包括应用显示区域的宽高、设备分辨率以及设备的宽高等属性，详细说明如下表。
比较 height、width 等宽高尺寸时，支持 vp 和 px 单位，无单位默认为 px。
例如
screen and (round-screen: true) ：表示当设备屏幕是圆形时条件成立。
(max-height: 800px) ：表示当高度小于等于 800px 时条件成立。
(height <= 800px) ：表示当高度小于等于 800px 时条件成立。
screen and (device-type: tv) or (resolution < 2) ：表示包含多个媒体特征的多条件复杂语句查询，当设备类型为 tv 或设备分辨率小于 2 时条件成立。
(dark-mode: true) ：表示当系统为深色模式时成立。
媒体查询监听
可以根据固定查询条件生成所对应的媒体查询监听，此监听一直在运行中，直到符合媒体查询条件，触发对应的操作。
private listener:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(800vp>width>320vp)')this.listener.on('change',(result:mediaquery.MediaQueryResult)=>{ //绑定改变监听 })
复制代码
案例
根据屏幕大小显示不同的背景颜色。
import { mediaquery } from '@kit.ArkUI';
@Entry@Componentstruct Mediapage { @State message: string = 'Hello World'; // 屏幕尺寸在320到600 private listener:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(600vp>width>320vp)') // 屏幕尺寸小于320 private listener1:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(320vp>width)') // 屏幕尺寸大于600 private listener2:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(width>600vp)') @State bakcolor:Color=Color.White aboutToAppear(): void { //所有监听绑定事件 this.listener.on('change',(result:mediaquery.MediaQueryResult)=>{ if(result.matches){ this.bakcolor=Color.Yellow } }) this.listener1.on('change',(result:mediaquery.MediaQueryResult)=>{ if(result.matches){ this.bakcolor=Color.Red } }) this.listener2.on('change',(result:mediaquery.MediaQueryResult)=>{ if(result.matches){ this.bakcolor=Color.Green } }) } aboutToDisappear(): void {//解绑监听 this.listener.off("change") this.listener1.off("change") this.listener2.off("change") }
build() { RelativeContainer() { } .backgroundColor(this.bakcolor) .height('100%') .width('100%') }}
复制代码
运行效果
评论