CSS：权威指南，第 5 版

第 21 章 CSS At-Rules CSS At-Rules

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

在过去的 20 章中，我们已经探索了可以组合创建 CSS 规则的属性、值和选择器。 这些就是我们常说的普通规则或常规规则，它们功能强大，但有时需要更多。 有时，我们需要在条件块中封装某些样式，例如，可以在特定的页面宽度下应用样式，或者只有在处理样式表的浏览器识别出特定 CSS 特性时才应用样式。

这些规则几乎无一例外地包含在 at规则中，之所以称为 at规则，是因为它们以 at (@) 符号开头。 在前几章中，你已经看到了一些这样的规则，如@font-face 和@counter-style ，但还有更多的规则与样式的具体细节没有那么紧密的联系。 本章将探讨三个强大的 at 规则@media 、@container 和@supports 。

媒体查询

借助 HTML 和 CSS 中定义的称为媒体查询的机制，您可以将任何样式集（包括整个样式表）限制在特定的媒体（如屏幕或打印）和特定的媒体条件集上。这些机制允许你定义媒体类型和条件的组合，例如显示尺寸或颜色深度。在探讨更复杂的形式之前，我们将先介绍基本形式。

基本媒体查询

对于 基于 HTML 的样式表，可以通过media 属性施加中等限制。这对<link> 和<style> 元素同样有效：

<link rel="stylesheet" media="print"
    href="article-print.css">
<style media="print">
    body {font-family: sans-serif;}
</style>

media 属性 可接受单一媒体值或以逗号分隔的媒体值列表。因此，要链接一个只应在screen 和print 媒体中使用的样式表，可以这样写：

<link rel="stylesheet" media="screen, print"
    href="visual.css">

在样式表本身中，也可以对@import 规则施加中等限制：

@import url(visual.css) screen;
@import url(article-print.css) print;

请记住，如果不在样式表中添加媒介信息，它将应用于所有媒体。因此，如果你希望一组样式只应用于屏幕，而另一组样式只应用于打印，你就需要在两个样式表中都添加媒介信息。例如

<link rel="stylesheet" media="screen"
    href="article-screen.css">
<link rel="stylesheet" media="print"
    href="article-print.css">

如果去掉本例中第一个<link> 元素中的media 属性，那么article-screen.css样式表中的规则将应用于所有媒体。

CSS 还定义了@media 块的语法。这样，您就可以在同一样式表中为多种媒体定义样式。请看下面这个基本示例：

<style>
body {background: white; color: black;}
@media screen {
    body {font-family: sans-serif;}
    h1 {margin-top: 1em;}
}
@media print {
    body {font-family: serif;}
    h1 {margin-top: 2em;