1. CSS 的 @ 符号概览与基础概念
1.1 认识 CSS at-rule 的作用与分类
在 CSS 中，以 @ 开头的语句被称为 at-rule，它们用于控制样式表之外的行为或引入资源。at-rule 不是普通的选择器，它们告诉浏览器在特定条件下如何处理样式、字体、动画及其他资源。通过理解这类规则，可以更高效地组织样式逻辑并提升页面可维护性。
常见的 at-rule 包括 @charset、@import、@font-face、@media、@supports 等。它们的作用分为编码、资源加载、字体定义、响应式设计和特性检测等不同维度，互相补充实现更健壮的网页表现。
以下展示一个最基本的编码相关 at-rule，用来指定文档编码以确保字符集正确解析：这是确保国际化内容正确显示的关键步骤。
@charset "UTF-8";2. 从 @media 开始的响应式设计要点
2.1 @media 的基本语法与应用场景
@media 规则用于在不同设备和条件下应用不同的样式，核心目标是实现响应式设计与跨设备一致的用户体验。通过定义媒体特性（如宽度、高度、分辨率等）来切换样式集合，从而使布局在手机、平板和桌面端都能良好呈现。
在实际开发中，结合断点设计与语义性类名可以提升可维护性与重用性。下方展示一个典型的媒体查询示例，针对最大宽度 600px 的设备应用简化的布局：
@media (max-width: 600px) {.container {padding: 16px;}.nav { display: none; }
}关键点在于确保断点简洁且与设计系统对齐，避免无谓的样式变化导致维护成本上升。
2.2 常见媒体特性与断点策略
为了实现精准的响应式效果，需要了解常见的媒体特性，如 width、height、aspect-ratio、orientation、以及分辨率等。合理的断点策略不仅要覆盖常见设备，还要考虑内容在不同视口下的可读性与交互性。
在设计阶段，可以先定义一个核心网格和排版尺度，然后通过 @media 进行分派，确保文本在不同设备上的对比度和行长保持良好。
下面给出一个包含多断点的示例，演示如何在一个页面中平衡布局、导航与字体大小的变化：
@media (min-width: 768px) {.content { max-width: 700px; font-size: 1rem; }
}
@media (min-width: 1024px) {.content { max-width: 900px; font-size: 1.125rem; }
}
@media (max-width: 480px) {.content { padding: 12px; font-size: 0.95rem; }
}3. 深入字体定义：@font-face 的字体自定义要点
3.1 @font-face 的基本语法与用途
@font-face 规则用于将自定义字体嵌入到网页中，使文本显示不再受系统字体限制。通过指定字体家族名称和多种字体格式，可以在不同浏览器中实现一致性渲染。
在实现中，优先下载现代格式（如 woff2）并提供回退格式，以兼容旧浏览器的字体加载能力。字体文件通常放在服务器静态目录，配合字体族名进行引用。
下面是一个典型的 @font-face 示例，演示如何定义一个自定义字体并指定多种格式与权重：
@font-face {font-family: "MyCustomFont";src: url("/fonts/MyCustomFont.woff2") format("woff2"),url("/fonts/MyCustomFont.woff") format("woff");font-weight: normal;font-style: normal;font-display: swap;
}3.2 字体加载优化与跨浏览器兼容性
在实际应用中，使用 font-display: swap 可以在字体异步加载时保持文本可读性，避免“无字”的空白效果，这是提升用户体验的关键策略之一。同时提供多格式字体能覆盖不同浏览器对字体格式的支持差异，提升兼容性。
为了避免大字体文件对首屏加载的影响，可以采用分支加载策略：先加载关键字形字体，其他字体异步加载，确保页面快速呈现。
以下展示一个结合 @font-face 与 font-display 的实际应用片段：
@font-face {font-family: "InterUI";src: url("/fonts/InterUI.woff2") format("woff2");font-weight: 400 700;font-display: swap;
}4. 其他 CSS at-rule 的应用要点
4.1 @supports 的特性检测与降级方案
@supports 规则用于检测浏览器对某一 CSS 特性的支持情况，从而选择性地应用样式，提升兼容性与渐进增强的能力。通过特性检测实现条件性样式，可以让新特性在兼容的浏览器中生效，在不支持的环境中自动退回到稳定样式。
示例中，若浏览器支持 CSS Grid，就采用网格布局；否则回退到传统的浮动布局，这样的策略能提升用户体验的一致性。
下面是一个简单的 @supports 示例：
@supports (display: grid) {.layout { display: grid; grid-template-columns: 1fr 2fr; }
}4.2 @keyframes 与 CSS 动画的基本用法
@keyframes 用于定义动画序列，并通过 animation 属性 进行应用。动画不仅美化界面，也能提升信息传递的节奏感，但应避免过度使用以免影响性能。
通过 @keyframes，可以定义从初始状态到结束状态的逐帧变化，配合浏览器的合成动画优化，获得流畅的过渡效果。
示例展示了简单的淡入动画：
@keyframes fadeIn {from { opacity: 0; transform: translateY(4px); }to { opacity: 1; transform: translateY(0); }
}
.element { animation: fadeIn 0.6s ease-out; }4.3 @import 的资源加载与性能考量
@import 用于在样式表中引入其他样式表，但需谨慎使用，因为过早的网络请求可能影响首屏渲染。尽量在文档头部尽早加载，并结合异步加载策略提升性能。
为了更好地管理资源，可以将不同功能域的样式拆分为独立的文件，并将其通过 @import 组合在主样式表中，从而实现模块化开发。
简要示例展示了如何在主样式表中引入其他样式表：
@import url("/css/reset.css");
@import url("/css/components.css");
@import url("/css/typography.css");5. 实战：一个简易的页面实现要点，结合 @media 与 @font-face 的应用
5.1 场景与实现要点
在一个简易页面中，使用 @font-face 自定义字体并通过 @media 实现响应式排版，可以确保在多设备上有一致的视觉体验。将字体加载与布局响应解耦，能提升页面的可维护性与用户感知速度。
为了实现快速首屏和稳定回退，先定义核心字体，再在不同断点调整字号与间距，从而保持良好的可读性。
下面展示一个综合示例，包含字体定义、响应式排版与一个简单的导航布局：
@font-face {font-family: "DemoSans";src: url("/fonts/DemoSans.woff2") format("woff2");font-display: swap;
}
:root {--base-size: 16px;
}
body { font-family: "DemoSans", system-ui, Arial, sans-serif; font-size: var(--base-size); }
@media (max-width: 800px) {:root { --base-size: 15px; }
}
@media (min-width: 1200px) {:root { --base-size: 18px; }
}