HarmonyOS Next应用开发——响应式布局之媒体查询

响应式布局之媒体查询

媒体查询作为响应式设计的核心,在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式,常用于多屏幕的应用适配。媒体查询常用于下面两种场景:

  1. 针对设备和应用的属性信息(比如显示区域、深浅色、分辨率),设计出相匹配的布局。
  2. 当屏幕发生动态改变时(比如分屏、横竖屏切换),同步更新应用的页面布局。
媒体查询条件

符合媒体查询条件会触发屏幕的操作,比如在手机屏幕上布局如何显示,在平板屏幕上布局如何显示。

媒体查询条件由媒体类型、逻辑操作符、媒体特征组成,其中媒体类型可省略,逻辑操作符用于连接不同媒体类型与媒体特征,其中,媒体特征要使用"()"包裹且可以有多个。

语法规则包括媒体类型(media-type)、媒体逻辑操作(media-logic-operations)(经常省略)和媒体特征(media-feature)。

typescript 复制代码
[media-type] [media-logic-operations] [(media-feature)]
媒体类型(media-type)

查询条件未写媒体类型时,默认为screen。媒体类型必须写在查询条件开头。

类型 说明
screen 按屏幕相关参数进行媒体查询。
媒体特征(media-feature)

媒体特征包括应用显示区域的宽高、设备分辨率以及设备的宽高等属性,详细说明如下表。

比较height、width等宽高尺寸时,支持vp和px单位,无单位默认为px。

类型 说明
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 设备的宽度。当前仅在应用初始化时保存一次,不会随设备宽度变化实时更新,例如折叠屏的折叠展开场景。
device-type 设备的类型。可选值:default、tablet。
min-device-width 设备的最小宽度。
max-device-width 设备的最大宽度。
round-screen 屏幕类型,圆形屏幕为true,非圆形屏幕为false。
dark-mode 系统当前的深浅模式。可选值:true、false。深色模式为true,浅色模式为false。

例如

  • 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) :表示当系统为深色模式时成立。
媒体查询监听

可以根据固定查询条件生成所对应的媒体查询监听,此监听一直在运行中,直到符合媒体查询条件,触发对应的操作。

javascript 复制代码
private listener:mediaquery.MediaQueryListener=this.getUIContext().getMediaQuery().matchMediaSync('(800vp>width>320vp)')
this.listener.on('change',(result:mediaquery.MediaQueryResult)=>{ //绑定改变监听
     
   })

案例

根据屏幕大小显示不同的背景颜色。

javascript 复制代码
import { mediaquery } from '@kit.ArkUI';

@Entry
@Component
struct 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%')
  }
}

运行效果

相关推荐
慧一居士21 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead23 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app