CSS媒体查询失效排查：max-width:600px规则不生效

你遇到的问题根源有两个：

• 卡片元素的固定宽限制和硬编码的网格行列定位没有在小屏幕媒体查询中重置，导致即使网格列数改成1fr，卡片的位置和宽度还是被原有规则锁定。
• 浏览器显示规则已读取，但未被覆盖的原有样式主导了最终布局。

具体修复步骤：

1. 重置小屏幕下的卡片网格定位 #

在@media (max-width: 600px)中，需要覆盖之前给.card:nth-of-type(n)设置的grid-column和grid-row属性，让卡片自动按单列排列：

@media (max-width: 600px) {
  .main-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto; /* 重置行高为auto，适应内容高度 */
  }
  /* 清除所有卡片的硬编码网格定位 */
  .card:nth-of-type(1),
  .card:nth-of-type(2),
  .card:nth-of-type(3),
  .card:nth-of-type(4) {
    grid-column: auto;
    grid-row: auto;
  }
}

2. 调整卡片的宽度限制 #

原来的.card设置了min-width: 350px和max-width: 350px，这会导致小屏幕下卡片宽度固定，无法适应容器宽度甚至溢出。修改为：

.card {
  /* 替换原有的固定宽限制 */
  width: 100%;
  max-width: 350px; /* 保留最大宽度，避免大屏幕下卡片过宽 */
  min-width: unset; /* 移除最小宽度强制限制 */
  /* 其他原有样式保留 */
}

也可以在小屏幕媒体查询中单独修改：

@media (max-width: 600px) {
  .card {
    min-width: unset;
    width: 100%;
  }
}

3. 可选优化：调整小屏幕下的边距与header宽度 #

小屏幕下body的10%左右边距可能过窄，header的50%宽度也会导致内容拥挤，可补充：

@media (max-width: 600px) {
  body {
    margin: 70px 5% 50px 5%;
  }
  header {
    width: 100%;
  }
}

完整修改后的小屏幕媒体查询代码 #

@media (max-width: 600px) {
  body {
    margin: 70px 5% 50px 5%;
  }
  header {
    width: 100%;
  }
  .main-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 20px;
  }
  .card {
    min-width: unset;
    width: 100%;
    margin-inline: auto;
  }
  .card:nth-of-type(1),
  .card:nth-of-type(2),
  .card:nth-of-type(3),
  .card:nth-of-type(4) {
    grid-column: auto;
    grid-row: auto;
  }
}

修改后，小屏幕下网格会自动变为单列，卡片自适应宽度并按顺序排列，布局就能正常响应了。

内容的提问来源于stack exchange，提问作者Jim Christiano