CSS 媒体查询中“screen”和“only screen”的区别是什么

在本文中，我们将介绍CSS中媒体查询中的“screen”和“only screen”之间的区别。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

1. “screen”和“only screen”的基本概念

在CSS中，媒体查询是一种针对不同设备和媒体类型（如屏幕、打印机等）应用不同样式的机制。媒体类型由媒体查询中的关键字来指定。其中，“screen”用于指定样式应用于屏幕媒体（如电脑、手机等），而“only screen”则表示该样式仅应用于屏幕媒体。

2. “screen”和“only screen”的区别

虽然两者都用于指定屏幕媒体，但它们之间存在一些关键区别。

2.1 “screen”

“screen”是一个被广泛使用的媒体类型关键字，用于应用于所有屏幕媒体的样式。这意味着使用“screen”关键字的样式将在所有屏幕设备上生效，不论其特性和功能。例如：

@media screen {
  body {
    background-color: lightblue;
  }
}

上述示例中，背景颜色为浅蓝色的样式将在所有屏幕设备上生效。

2.2 “only screen”

“only screen”是一个更为特定的媒体查询关键字，用于指定只有在屏幕媒体上才应用某些样式。这可以用于排除其他类型的媒体（如打印媒体）。例如：

@media only screen {
  #header {
    display: none;
  }
}

上述示例中，页眉将只在屏幕媒体上隐藏，而在其他媒体上保持可见。

3. 如何选择使用“screen”还是“only screen”

在实际应用中，选择使用“screen”还是“only screen”取决于具体的需求。以下情况可能需要考虑使用“only screen”：

当你需要针对不同媒体类型应用不同的样式时，例如在屏幕和打印媒体上显示不同的布局。
当你想排除某些特定媒体类型（如打印媒体）而只关注屏幕媒体时。

需要注意的是，除了“screen”和“only screen”之外，还有其他一些媒体类型关键字，如“print”（打印媒体）、“speech”（语音合成器）等。根据实际需求选择合适的媒体类型非常重要。

4. 示例说明

下面通过一个示例来说明“screen”和“only screen”的区别。

@media screen {
  body {
    font-size: 16px;
  }
  /* 这里的样式将在所有屏幕媒体上生效 */
}

@media only screen {
  body {
    font-size: 18px;
  }
  /* 这里的样式将只在屏幕媒体上生效，不包括打印媒体等其他媒体 */
}

在上述示例中，当在屏幕设备上访问页面时，字体大小将根据媒体查询的条件不同而有所区别。如果使用“screen”，则字体大小为16px，这将对所有屏幕设备生效。但如果使用“only screen”，则字体大小将变为18px，仅在屏幕设备上生效。这可以让我们根据媒体类型的不同应用不同的样式。