Media Queries响应式菜单问题：中等分辨率元素重叠求助

针对你遇到的中等分辨率（481-768px）下菜单元素重叠、grid-template-areas未生效的问题，不需要复杂的区域配置，直接在对应Media Query里给菜单容器设置基础Grid属性就能快速解决，完全符合教授要求的仅用Media Queries实现的规则。

核心修复方案 #

找到你的菜单容器（假设类名为.menu-container），在中等分辨率的媒体查询块内添加以下CSS：

@media (min-width: 481px) and (max-width: 768px) {
  .menu-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 均分2列 */
    grid-template-rows: repeat(3, auto); /* 自适应3行高度 */
    gap: 12px; /* 添加元素间距，彻底避免重叠 */
  }
}

完整代码示例（含各分辨率适配） #

HTML结构

<div class="menu-container">
  <div class="menu-item">菜单选项1</div>
  <div class="menu-item">菜单选项2</div>
  <div class="menu-item">菜单选项3</div>
  <div class="menu-item">菜单选项4</div>
  <div class="menu-item">菜单选项5</div>
  <div class="menu-item">菜单选项6</div>
</div>

CSS样式

/* 低分辨率（≤480px）纵向布局 */
.menu-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}

.menu-item {
  padding: 12px;
  background: #f0f0f0;
  border-radius: 4px;
}

/* 中等分辨率（481-768px）3行2列网格 */
@media (min-width: 481px) and (max-width: 768px) {
  .menu-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 12px;
  }
}

/* 高分辨率（≥769px）横向布局 */
@media (min-width: 769px) {
  .menu-container {
    flex-direction: row;
    justify-content: space-between;
  }
}

问题原因说明 #

• 之前grid-template-areas未生效，大概率是没给每个菜单子项设置对应的grid-area属性，或者容器遗漏了display: grid声明；
• 元素重叠是因为中等分辨率下没有给容器明确划分网格空间，导致元素挤在一起，添加grid-template-columns/rows和gap就能彻底解决。

内容的提问来源于stack exchange，提问作者Leonardo Matiazzo