如何在媒体查询中隐藏grid布局里未使用的aside区块

你遇到的display:none不生效的问题，通常是样式优先级、媒体查询未触发、grid配套属性缺失三类原因导致，按以下步骤排查即可解决：

• 第一步：确认媒体查询断点和触发条件正确
  检查你写移动端样式的媒体查询规则是否匹配当前测试的设备宽度，比如设置的@media (max-width: 768px)，实际测试时窗口宽度是否小于768px。
• 第二步：补充grid容器的配套布局属性
  你只修改了grid-template-areas，没有同步修改grid-template-columns属性，桌面端是8列布局，移动端改为单列布局必须同步设置：

  .grid-container {
    /* 替换为你的grid容器选择器 */
    grid-template-columns: 1fr;
  }
  

• 第三步：提升aside隐藏样式的优先级
  如果你原有aside样式用了类、ID选择器设置了display属性，用标签选择器修改的权重不够会导致不生效，可以先加!important验证，后续再优化选择器权重：

  @media (max-width: 768px) {
    aside {
      display: none !important;
    }
  }
  

• 第四步：验证样式是否真的生效
  打开浏览器开发者工具，选中aside元素，查看「计算样式」面板中的display属性，如果已经显示为none但仍有元素展示，说明你看到的不是aside元素，是其他多余的布局元素。

完整可运行示例代码 #

/* 桌面端样式 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-areas:
    "header header header header header header header header"
    "nav section section section section section section aside"
    "nav section section section section section section aside"
    "nav section section section section section section aside"
    "footer footer footer footer footer footer footer footer";
}
header { grid-area: header; }
nav { grid-area: nav; }
section { grid-area: section; }
aside { grid-area: aside; }
footer { grid-area: footer; }

/* 移动端样式 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "section"
      "section"
      "section"
      "section"
      "section"
      "footer";
  }
  aside {
    display: none;
  }
}

内容的提问来源于stack exchange，提问作者Максим