CSS “screen”和”only screen”在媒体查询中有什么区别

在响应式设计中，媒体查询是非常重要的工具，可以根据设备的屏幕尺寸、分辨率和方向等特性来定制不同的样式或布局。在媒体查询中，“screen”和“only screen”是常见的两个关键词，那么它们有什么区别呢？

什么是“screen”？

“screen”是一个媒体类型（media type），用于匹配屏幕媒体设备，如智能手机、平板电脑、笔记本电脑、台式机等。当使用“screen”媒体类型时，媒体查询中的样式规则会被应用到屏幕显示上。

以下是一个简单的示例代码，当设备屏幕宽度小于等于768像素时，网页背景为灰色：

@media screen and (max-width: 768px) {
  body {
    background-color: gray;
  }
}

“only screen”则是一个媒体类型和一个媒体特性（media feature）的组合。它只匹配屏幕媒体设备，且只有在媒体特性匹配时才会应用样式规则。常见的媒体特性有屏幕宽度、高度、方向、分辨率等。

“only”关键词并不是必须的，但它的作用是防止旧版的浏览器忽略这种类型的媒体查询。

以下是一个示例代码，当设备屏幕宽度小于等于768像素时，网页背景为灰色，且字体为白色：

@media only screen and (max-width: 768px) {
  body {
    background-color: gray;
    color: white;
  }
}

通过上面两个示例代码的对比，我们可以总结出“screen”和“only screen”的主要区别：

“screen”是一个媒体类型，用于匹配所有屏幕媒体设备，不管是旧版的浏览器还是新版的浏览器，都会应用对应的样式规则。
“only screen”是一个特殊的媒体查询类型，因为它除了匹配屏幕媒体设备外，还需要根据媒体特性进行进一步的匹配。如果在不支持媒体查询的浏览器中使用“only screen”（或省略“only”关键词），会导致样式规则在所有媒体设备上被应用，这可能会破坏页面布局或导致不必要的性能开销。

因此，我们建议在媒体查询中使用“only screen”，这样可以确保样式规则只在屏幕媒体设备上应用，并且谨慎使用“screen”媒体类型。