当前位置: 首页 > article >正文

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

响应式布局之媒体查询

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

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

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

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

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

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

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

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

案例

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

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%')
  }
}

运行效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


http://www.kler.cn/a/331324.html

相关文章:

  • 图解HTTP-HTTP报文
  • 未来将要被淘汰的编程语言
  • 固定电话采用的是模拟信号还是数字信号?如果通话两端采用不同的信号会发生什么?
  • springboot463学生信息管理系统论文(论文+源码)_kaic
  • Docker_常用命令详解
  • 电商项目-网站首页高可用(二)
  • 【2024.10.2练习】奶牛晒衣服
  • Vue diff 算法介绍
  • 《江苏科技大学学报(自然科学版)》
  • 解决方法:PDF文件打开之后不能打印?
  • docker 搭建minimalist-web-notepad
  • OpenGL ES 顶点缓冲区和布局(3)
  • spring揭秘25-springmvc04-servlet容器与springmvc容器总结
  • 在线css像素px到Em的转换器
  • 二值图像的面积求取的两种方法及MATLAB实现
  • Java - LeetCode面试经典150题 - 矩阵 (四)
  • 【羊毛资源】华为云开发者云主机免费申请使用指南
  • Docker 容器日志记录与管理:日志输出、轮转与配置实践
  • Qt --- 系统相关---事件、文件操作、多线程编程、网络编程、多媒体
  • SpringBoot整合QQ邮箱
  • 春潮涌动:构建“衣依”服装销售平台的Spring Boot之旅
  • 信息安全工程师(32)认证技术方法
  • Go语言接口与多态
  • Python 中的 os 模块
  • openpnp - 吸嘴校正失败的opencv参数分析
  • C题(四)水仙花数