【鸿蒙实战开发】通过主窗口或媒体查询监听断点

最新推荐文章于 2025-05-08 08:43:53 发布

原创

最新推荐文章于 2025-05-08 08:43:53 发布 · 427 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #媒体 #android #华为 #鸿蒙 #前端 #安卓

断点

断点以应用宽度为切入点，将应用窗口在宽度维度分成几个不同的区间即不同的断点

在这里插入图片描述

开发者可以根据实际使用场景决定适配哪些断点。如xs断点对应的一般是智能穿戴类设备
可以根据实际需要在lg断点后面新增xl、xxl等断点。根据实际需要设置适配范围，避免增加较大程序的开发量

主窗口监听断点

1.断点更新方法

private updateBreakpoint(widowWidth: number) {
  // px换算为vp

  // 主窗口尺寸宽度：widowWidth
  // 设备逻辑像素的密度：display.getDefaultDisplaySync().densityPixels
  let windowWidthVp = widowWidth / display.getDefaultDisplaySync().densityPixels
  let newBp: string = ''
  if (windowWidthVp < 320) {
    newBp = 'xs'
  } else if (windowWidthVp < 600) {
    newBp = 'sm'
  } else if (windowWidthVp < 840) {
    newBp = 'md'
  } else {
    newBp = 'lg'
  }
  if (this.curBp !== newBp) {
    this.curBp = newBp
    promptAction.showToast({
      message: thi