CSS媒体查询是实现响应式布局的核心技术手段，通过判断设备屏幕尺寸、分辨率等特征应用不同的样式规则，让页面在不同终端上都能保持良好的展示效果。当媒体查询不生效时，需要从语法、断点设置、样式优先级等多个维度排查问题。
媒体查询基础语法回顾
标准的CSS媒体查询语法格式如下，需要注意语法符号的正确使用，任何一个符号错误都可能导致规则失效：
/* 当屏幕宽度小于等于768px时应用以下样式 */
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
}
常见拼写错误导致不生效的排查
1. 关键字拼写错误
媒体查询的关键字必须严格匹配标准写法，常见的错误包括把@media写成@medi、screen写成scren、max-width写成max_width或者maxwidth。这类错误浏览器会直接忽略整个媒体查询规则，不会抛出明显报错，需要逐字符核对。
2. 括号与冒号使用错误
媒体查询的条件部分需要用小括号包裹，属性和值之间用冒号分隔，错误示例如下：
/* 错误写法：缺少小括号，冒号后多了空格 */
@media screen and max-width: 768px {
.box { width: 100%; }
}
/* 正确写法 */
@media screen and (max-width: 768px) {
.box { width: 100%; }
}
断点设置与响应式布局问题
1. 断点不符合设备实际尺寸
设置的断点没有覆盖目标设备的尺寸是常见的失效原因，比如只设置了max-width: 768px的规则，但测试设备宽度是769px，就不会触发对应样式。建议参考主流设备的尺寸设置断点，同时采用移动优先的开发思路，先写小屏幕基础样式，再用min-width逐步适配大屏幕。
2. 样式优先级冲突
如果媒体查询内的选择器优先级低于其他普通选择器，样式会被覆盖。比如普通样式用了ID选择器#header，媒体查询内用了类选择器.header，即使媒体查询条件命中，ID选择器的样式也会优先生效。可以通过提升媒体查询内选择器的优先级，或者调整样式引入顺序解决，媒体查询样式尽量放在普通样式之后。
响应式布局优化建议
- 统一断点标准，避免零散的断点设置，减少维护成本
- 媒体查询内只写需要变更的样式，不要重复定义基础样式
- 使用相对单位如
rem、%替代固定像素值，提升适配灵活性 - 开发阶段使用浏览器开发者工具的响应式模式实时调试媒体查询触发情况
调试技巧
可以在媒体查询规则内添加一个显眼的测试样式，比如修改背景颜色，快速判断规则是否生效：
@media screen and (max-width: 768px) {
body {
background-color: #f0f0f0; /* 测试用背景色，生效则说明媒体查询正常触发 */
}
}
如果添加了测试样式仍不生效，再逐步排查语法、断点、优先级等问题，能大幅提升排查效率。