CSS Grid媒体查询不生效，仅400px时正常工作求助

你的grid布局媒体查询未生效，可从以下几个常见方向排查解决：

1. 补充viewport元标签（最可能的原因） #

移动端浏览器默认会用虚拟视口（通常为980px）渲染页面，导致媒体查询判断的是虚拟视口宽度而非实际屏幕宽度。必须在HTML的<head>中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

该标签会让浏览器以设备实际宽度作为视口基准，媒体查询才能按预期触发。

2. 检查CSS优先级冲突 #

确认是否有更高优先级的样式覆盖了main的grid-template-columns属性：

• 带有!important的规则
• 更具体的选择器（如#app main、.content-wrap main）
• 内联样式（直接写在<main>标签的style属性中）
  通过浏览器开发者工具（F12）查看main元素的样式面板，若grid-template-columns被划掉，说明被覆盖，需调整选择器优先级或移除冲突样式。

3. 清除浏览器缓存或验证CSS加载 #

旧CSS文件缓存可能导致修改不生效：

• 强制刷新页面（Ctrl+F5 / Cmd+Shift+R）
• 检查CSS文件引入路径是否正确
• 给CSS文件添加版本号（如style.css?v=2）避免缓存

4. 确认媒体查询逻辑与语法 #

虽然你的代码语法无明显错误，但可再次核对：

• 确保所有括号、大括号正确闭合
• 若曾替换min-width为max-width，需注意逻辑：max-width:700px表示宽度≤700px时应用样式，和你“<700px显示1列”的预期匹配吗？原代码的min-width:700px是≥700px显示2列，逻辑是正确的。

内容的提问来源于stack exchange，提问作者Just1.0