CSS媒体查询中screen、only screen的区别及and关键字的必要性

下面逐个拆解你列出的几种媒体查询写法：

1. @media (max-width: width) { /* CSS Rules */ } #

这是不指定媒体类型的写法，默认匹配所有媒体类型（包括屏幕、打印设备、语音阅读器等），只要当前设备的视口宽度小于等于设定的width值，里面的CSS规则就会生效。

2. @media screen (max-width: width) { /* CSS Rules */ } #

这是语法错误的写法。当媒体查询同时包含媒体类型（screen）和媒体特性（max-width）时，必须用and连接，否则浏览器会判定这个查询无效，直接忽略里面的样式。

3. @media screen and (max-width: width) { /* CSS Rules */ } #

这是符合规范的标准写法：明确指定媒体类型为screen（即电脑、手机、平板这类屏幕设备），当屏幕视口宽度小于等于设定值时，应用里面的CSS规则。

4. @media only screen and (max-width: width) { /* CSS Rules */ } #

在标准写法基础上添加了only关键字，核心作用是兼容老旧浏览器：

• 对于不支持CSS3媒体查询的旧浏览器（比如IE8及更早版本），它们会把only screen识别成一个不存在的媒体类型，直接跳过整个查询块，避免错误应用样式；
• 现代浏览器会自动忽略only关键字，效果和第3种写法完全一致。

5. @media only screen (max-width: width) { /* CSS Rules */ } #

同样是语法错误的写法，only修饰媒体类型后，媒体类型和媒体特性之间依然需要and连接，浏览器会直接忽略这个无效查询。

screen 与 only screen 的差异 #

• screen：直接指定媒体类型为屏幕设备，所有支持媒体查询的浏览器（包括相对旧的版本）都能正常解析并应用样式。
• only screen：本质是兼容 hack，专门针对不支持CSS3媒体查询的老旧浏览器。这类浏览器无法识别带only的媒体类型，会直接跳过整个查询；而支持的浏览器会无视only，只按screen类型处理。如果你的项目不需要兼容这类极旧浏览器，only可以省略，效果完全一样。

是否必须添加and关键字？ #

分两种情况：

• 如果媒体查询同时包含媒体类型和媒体特性（比如screen+max-width），必须用and连接，否则语法无效（比如上面的第2、5种错误写法）；
• 如果只有媒体特性（比如第1种@media (max-width: ...)），或者只有媒体类型（比如@media screen { ... }），则不需要and。

内容的提问来源于stack exchange，提问作者Sugarpearl