#鸿蒙通关秘籍#如何在鸿蒙应用中使用媒体查询实现响应式设计？

使用媒体查询模块 mediaquery 来实现响应式设计。通过 matchMediaSync 接口设置查询条件，并绑定一个回调函数，当任一媒体特征改变时，都会触发该回调函数，在回调中可根据返回的匹配结果更改页面布局。代码示例如下：

typescript import { mediaquery } from '@kit.ArkUI';

let listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');

function onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) { if (mediaQueryResult.matches) { // 横屏处理逻辑 } else { // 竖屏处理逻辑 } }

listener.on('change', onPortrait);