这几个CSS媒体查询语句之间存在哪些区别？
2026-8-1
几个CSS媒体查询语句的区别分析
下面逐个拆解这几条媒体查询的差异：
@media (max-width: 100px) { /* CSS Rules */ }
没有指定媒体类型，默认匹配所有媒体类型（屏幕、打印、语音阅读器等），只要当前媒体的视口宽度≤100px，就会应用里面的样式规则。@media screen (max-width: 100px) { /* CSS Rules */ }
这是语法错误的无效写法。CSS媒体查询要求媒体类型（如screen）和媒体特性（如max-width）之间必须用and连接，浏览器无法解析这种写法，里面的样式不会生效。@media screen and (max-width: 100px) { /* CSS Rules */ }
标准的有效写法：明确指定媒体类型为screen（即各类屏幕设备，比如电脑显示器、手机屏幕），当屏幕视口宽度≤100px时，应用里面的样式规则。@media only screen and (max-width: 100px) { /* CSS Rules */ }
作用和上一条基本一致，但多了only关键字——这是为了兼容IE8及更早的老旧浏览器。这类旧浏览器不识别only关键字，会把整个媒体查询判定为无效，从而忽略这段样式；而现代浏览器能正常解析，仅在屏幕设备且视口≤100px时应用样式。@media only screen (max-width: 100px) { /* CSS Rules */ }
同样是语法错误的无效写法，缺少了媒体类型和特性之间的and连接符，浏览器无法正确处理，里面的样式不会被应用。
内容的提问来源于stack exchange，提问作者Sugarpearl
相关产品推荐
相关产品推荐
