什么是 at-rules 以及为什么在 CSS 中使用“at”？

在 CSS 中，at-rules 是一种以 "at" 符号为前缀的指令，它们用于在样式表中声明一些特殊的内容，例如媒体查询、字体引入、动画等。

at-rules 的基本语法结构如下：

@rule name [value];

其中：

• @ 表示这是一个 at-rule；
• rule name 表示规则名称；
• value 表示规则的值，它可以是一个包含任意内容的字符串，也可以是一个包含多个值的列表。

常见的 at-rule 包括：

• @media：用于定义不同的媒体类型下的样式；
• @import：用于导入外部样式表；
• @font-face：用于定义自定义字体；
• @keyframes：用于定义 CSS 动画；
• @supports：用于定义是否支持一些 CSS 属性。

使用 at-rules 的好处在于可以增强 CSS 的灵活性和可读性，在不同的场景下可以使用不同的 at-rules 来定义不同的规则，使样式表更具有可维护性和可复用性。

例如，在以下代码中，我们使用 @media at-rule 来定义不同屏幕尺寸下的样式：

/* 对于宽度小于 600px 的屏幕 */
@media screen and (max-width: 600px) {
  body {
    background-color: orange;
  }
}

/* 对于宽度大于等于 600px 的屏幕 */
@media screen and (min-width: 600px) {
  body {
    background-color: skyblue;
  }
}

这样，我们就可以根据屏幕尺寸自适应地为页面设置不同的背景颜色。

总之，at-rules 是 CSS 中的一种特殊指令，可以用来定义一些特殊的规则和功能，增强 CSS 的可读性和可维护性。