在响应式网页开发中，CSS媒体查询是实现不同屏幕尺寸下样式适配的核心手段，但不少开发者都遇到过媒体查询设置后完全没有生效的情况，反复检查样式规则本身却没有发现问题。这类问题很多时候不是逻辑错误，而是一些容易被忽略的拼写错误导致的。
常见的媒体查询拼写错误类型
1. 关键字拼写错误
媒体查询的语法关键字必须严格正确，比如@media中的media不能拼错，screen、max-width这类常用关键字也经常出错。比如把max-width写成max-widht，浏览器无法识别这个错误的属性名，对应的样式规则就不会生效。
2. 标点符号错误
媒体查询的语法对符号要求严格，比如条件表达式后的大括号必须是英文符号，条件中的冒号、分号也不能用中文符号。如果写成中文的冒号：，浏览器会认为整个媒体查询语法错误，直接忽略所有内部样式。
3. 单位遗漏或错误
尺寸数值必须带正确的单位，比如max-width: 768px不能写成max-width: 768，也不能把px写成pxx这类错误拼写，否则浏览器无法解析尺寸值，媒体查询条件永远不会触发。
错误示例与正确写法对比
下面是一段因为拼写错误导致媒体查询失效的代码：
/* 错误示例：max-width 拼错为 max-widht，px 拼错为 pxz */
@media screen and (max-widht: 768pxz) {
.container {
width: 100%;
padding: 0 10px;
}
}
修正后的正确代码：
/* 正确示例：关键字和拼写都正确 */
@media screen and (max-width: 768px) {
.container {
width: 100%;
padding: 0 10px;
}
}
快速排查媒体查询拼写错误的方法
- 使用浏览器的开发者工具，在样式面板中查看媒体查询是否被识别，如果显示灰色或者无法展开，说明语法存在错误。
- 把媒体查询的条件单独复制到在线CSS验证工具中，工具会直接提示具体的拼写错误位置。
- 对照官方文档的媒体查询语法，逐字检查关键字、符号、单位的拼写是否正确。
其他可能导致媒体查询不生效的原因
除了拼写错误，还有几个常见原因需要排查：一是媒体查询的位置放在了其他样式的后面，被优先级更高的样式覆盖；二是viewport元标签没有正确设置，导致移动端浏览器以固定宽度渲染页面，媒体查询无法触发；三是选择器的优先级问题，媒体查询内部的样式权重不够，没有覆盖默认样式。