移动端Media Query断点不生效问题求助

核心原因：CSS解析顺序规则 #

CSS是从上到下顺序解析的，后声明的样式规则会覆盖前序同优先级的规则。如果你的媒体查询是先写小断点（max-width:479px）再写大断点（max-width:991px），那么大断点的规则会覆盖小断点的，导致移动端断点完全失效。

具体修复步骤 #

1. 调整媒体查询顺序 #

必须把更小的断点放在更大的断点之后，正确的代码结构示例：

/* 桌面端默认样式（无媒体查询） */
.page-container {
  width: 1200px;
  margin: 0 auto;
}

/* 平板断点：屏幕宽度≤991px时生效 */
@media (max-width: 991px) {
  .page-container {
    width: 90%;
  }
}

/* 移动端断点：屏幕宽度≤479px时生效 */
@media (max-width: 479px) {
  .page-container {
    width: 100%;
    padding: 0 15px;
  }
}

2. 排查语法与参数错误 #

• 确认媒体查询的括号、大括号是否完整闭合，样式规则末尾有没有遗漏分号
• 检查是否误将max-width写成min-width（移动端断点需要用max-width，表示屏幕宽度小于等于设定值时触发）
• 避免在大断点的样式中使用!important，否则会强行覆盖小断点的规则

3. 用开发者工具验证 #

打开浏览器开发者工具（快捷键F12），切换到移动端视图，手动调整屏幕宽度到479px以内，查看元素的计算样式面板，确认移动端断点的规则是否被正确应用，同时排查是否有其他CSS文件或内联样式覆盖了当前规则

内容的提问来源于stack exchange，提问作者Kristoffer-Staugaard