大部分同学都用过 CSS 的屏幕宽度媒体查询 ， 像是这样：
@media screen and (min-width: 900px) {div {padding: 1rem 3rem;}}这里表示的是与屏幕宽度相关的样式设置 ， 上面的代码表示当屏幕宽度大于 900px 时 ， 内部的样式代码块才能生效 。
其实不仅仅是上面的屏幕宽度媒体查询，在 CSS 中，存在大量的以 @ 符号开头的规则 。称之为 @规则(at-rule) 。本文就将介绍一下除去媒体查询之外，其他有意思的且在未来会越来越重要的 @规则 规则 。
at-rule @规则OK，什么是 @规则（at-rule ）呢？
一个 at-rule 是一个 CSS 语句，以 at 符号开头， '@' (U+0040 COMMERCIAL AT), 后跟一个标识符，并包括直到下一个分号的所有内容 ， ';' (U+003B SEMICOLON), 或下一个 CSS 块 ， 以先到者为准 。
除去我们最为熟悉的 @media 之外 ， CSS 还有哪些 @规则 呢？
下面是一些 @规则，由它们的标示符指定，每种规则都有不同的语法：
@charset, 定义样式表使用的字符集 。@import, 告诉 CSS 引擎引入一个外部样式表 。@namespace, 告诉 CSS 引擎必须考虑 XML 命名空间 。
@media，如果满足媒介查询的条件则条件规则组里的规则生效 。
@page，描述打印文档时布局的变化 。
@font-face，描述将下载的外部的字体 。
@keyframes，描述 CSS 动画的中间步骤 。
@supports, 如果满足给定条件则条件规则组里的规则生效 。
@document，如果文档样式表满足给定条件则条件规则组里的规则生效 。推荐阅读
- Typora图床上传配置：PicGo+Gitee 不完全指南
- 现代GPGPU 架构汇总
- CSS基础知识筑基
- CSS 动画一站式指南
- .NET 零开销抽象指南
- 为什么CSS中的calc函数可能会不生效？
- day03-CSS
- 北京广安门医院挂号攻略外地人就医看病指南
- CSS 渐变锯齿消失术
- Android 13 新特性及适配指南
