媒体查询(Media Query)是鸿蒙应用开发中实现响应式布局的重要技术，它允许开发者根据设备的不同特性(如屏幕尺寸、分辨率、方向等)来应用不同的样式规则。

基本概念

在鸿蒙开发中，媒体查询主要用于ArkUI框架中，通过CSS样式或ETS(eTS)代码来实现不同设备条件下的样式适配。

媒体查询语法

1. CSS中的媒体查询

在.css样式文件中使用媒体查询：

/* 基本语法 */
@media [media-type] and (media-feature-rule) {
  /* 样式规则 */
}

/* 示例：根据屏幕宽度应用不同样式 */
@media (min-width: 600px) {
  .container {
    flex-direction: row;
  }
}

@media (max-width: 599px) {
  .container {
    flex-direction: column;
  }
}

2. ETS中的媒体查询

在ETS(eTS)文件中，可以使用@Media装饰器或MediaQueryAPI：

// 使用@Media装饰器
@Media('min-width: 600px')
@Component
struct WideLayout() {
  build() {
    Row() {
      // 宽屏布局内容
    }
  }
}

@Media('max-width: 599px')
@Component
struct NarrowLayout() {
  build() {
    Column() {
      // 窄屏布局内容
    }
  }
}

// 在主组件中使用
@Component
struct MyComponent() {
  build() {
    Column() {
      // 根据屏幕宽度自动选择布局
      WideLayout()
      NarrowLayout()
    }.width('100%')
  }
}

实际示例

响应式布局示例

@Entry
@Component
struct ResponsiveLayout {
  build() {
    Column() {
      // 大屏幕布局（宽度≥768px）
      @Media('min-width: 768px') {
        Row() {
          Text('左侧内容').width('50%').backgroundColor(Color.Blue)
          Text('右侧内容').width('50%').backgroundColor(Color.Green)
        }
      }
      
      // 小屏幕布局（宽度<768px）
      @Media('max-width: 767px') {
        Column() {
          Text('上方内容').width('100%').backgroundColor(Color.Blue)
          Text('下方内容').width('100%').backgroundColor(Color.Green)
        }
      }
    }.width('100%').height('100%')
  }
}

动态样式调整示例

@Entry
@Component
struct DynamicStyle {
  @State fontSize: number = 16;
  
  build() {
    Column() {
      // 根据屏幕宽度动态调整字体大小
      @Media('min-width: 1200px') {
        this.fontSize = 24;
      }
      @Media('min-width: 768px') {
        this.fontSize = 20;
      }
      @Media('max-width: 767px') {
        this.fontSize = 16;
      }
      
      Text(`当前字体大小: ${this.fontSize}px`)
        .fontSize(this.fontSize)
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }
}

注意事项

1、鸿蒙的媒体查询语法与Web标准类似，但部分特性支持可能有所不同

2、在ETS中使用媒体查询时，注意装饰器的使用顺序和组件结构

3、对于复杂的响应式需求，可以考虑使用条件渲染结合媒体查询

通过合理使用媒体查询，开发者可以创建出在各种设备上都能良好显示的鸿蒙应用，提供一致的用户体验。