介绍

@ohos.mediaquery (媒体查询)

提供根据不同媒体类型定义不同的样式。

说明：

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

该模块不支持在UIAbility的文件声明处使用，即不能在UIAbility的生命周期中调用，需要在创建组件实例后使用。

本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。

从API version 10开始，可以通过使用UIContext中的getMediaQuery方法获取当前UI上下文关联的MediaQuery对象。

使用方式

首先创建对应的监听器

const listenerXS: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<=width<320vp)');
const listenerSM: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<=width<600vp)');
const listenerMD: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<=width<840vp)');
const listenerLG: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(width>=840vp)');

包会自动导入，不用手动导包也可以，然后为监听器添加事件

aboutToAppear(): void {
  // 添加回调函数
  listenerXS.on('change', (res: mediaquery.MediaQueryResult) => {
    if(res.matches){
      console.log('changeRes:', JSON.stringify(res))
      // 执行逻辑
      console.log('超小屏')
    }
  })
  listenerSM.on('change', (res: mediaquery.MediaQueryResult) => {
    if(res.matches){
      console.log('changeRes:', JSON.stringify(res))
      // 执行逻辑
      console.log('手机')
    }

  })
  // 添加回调函数
  listenerMD.on('change', (res: mediaquery.MediaQueryResult) => {
    if(res.matches){
      console.log('changeRes:', JSON.stringify(res))
      // 执行逻辑
      console.log('平板')
    }

  })
  listenerLG.on('change', (res: mediaquery.MediaQueryResult) => {
    if(res.matches){
      console.log('changeRes:', JSON.stringify(res))
      // 执行逻辑
      console.log('大屏')
    }

  })
}