媒体查询在响应式布局中的应用疑惑？

Question

我在使用媒体查询（Media Query）来实现响应式布局时，发现当设备从竖屏切换到横屏时，页面布局并没有立即更新。请问这是为什么？我该如何确保布局能够实时响应屏幕变化？我在<div>中使用了@media规则来设置不同屏幕尺寸下的样式，但是切换屏幕方向后样式没有立即生效。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

媒体查询通常应该能够响应屏幕方向的变化，但如果页面布局没有立即更新，可能是因为以下几个原因：

媒体查询未正确配置：检查你的媒体查询条件是否正确。
样式未应用：确保媒体查询中的样式被正确应用到了对应的元素上。
事件监听缺失：你可能需要监听屏幕方向变化的事件，并手动触发样式更新。

/* 在样式文件中 */
@media (orientation: landscape) {
  .responsive-container {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  .responsive-container {
    flex-direction: column;
  }
}

// 在JS中监听屏幕方向变化
window.addEventListener('resize', function() {
  if (window.orientation === 90 || window.orientation === -90) {
    // 横屏
  } else {
    // 竖屏
  }
  // 可以根据需要更新页面布局或样式
});

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。