首屏关键css是指影响首屏渲染视觉内容的样式，如.header、.hero-banner等；需保留媒体查询、内联时同步引入@font-face和自定义属性，并用media属性延迟非关键css加载。
怎么判断哪些CSS算“首屏关键CSS”
关键CSS不是按文件大小或选择器数量来定的，而是看它是否影响首屏渲染的视觉内容。比如一个.header、.hero-banner、.main-nav类在DOMContentLoaded前就被浏览器用来绘制首屏像素，它们就是关键的；而.modal-overlay或.pagination这类只在用户滚动/交互后才出现的样式，就不该塞进首屏。
- 用 Chrome DevTools 的
Rendering → Paint flashing开启后滚动观察，亮色块覆盖区域对应的样式大概率是关键的 - 禁用 JavaScript 后仍显示的首屏结构（如 logo、标题、首张图容器），其样式必须内联或提前加载
- 媒体查询本身不决定“关键性”，但
@media (max-width: 768px)在移动端访问时，其中匹配的规则可能比桌面版更关键
提取关键CSS时，media属性不能丢
很多工具（比如critters或手写脚本）默认只提取无媒体查询的规则，结果导致响应式断层：PC端正常，手机打开一片白或者布局错乱。这是因为@media不是装饰，而是条件开关——浏览器只在匹配时应用其中的声明。
- 提取工具必须开启
includeMediaQueries: true（critters）或等效选项，否则@media (prefers-color-scheme: dark)这类规则直接消失 - 手动提取时，别只复制
{...}，要连同@media整块保留，例如：@media (min-width: 640px) { .container { max-width: 640px; } } - 注意嵌套媒体查询（如 Sass 中的
@media screen and (min-width: ...)），编译后若被拆成多个@media块，每个都得单独识别和保留
link[rel="stylesheet"]里加media属性能延迟非关键CSS
把非关键CSS的<link>标签加上media属性（比如media="print"或media="(min-width: 992px) and (orientation: landscape)"），浏览器会把它标记为“不阻塞渲染”，直到条件满足才下载解析。这是原生、零构建成本的懒加载方式。
- 用
media="not all"可彻底阻止初始加载，后续用 JS 切换回media="all"来按需激活（适合主题切换或夜间模式） - 避免用
media="screen"——它等价于不写media，依然阻塞渲染 - 注意兼容性：
media属性在所有现代浏览器中生效，但 IE11 及更早版本会忽略带media的<link>，所以别把关键CSS放在这里
内联关键CSS后，media查询里的字体或变量可能失效
内联的<style></style>标签不支持@import，也**无法引用外部@font-face或 CSS 自定义属性（:root定义）**，除非这些定义也在同一处内联。否则你会看到文字回退成系统字体，或颜色值变成var(--primary, #000)未解析的原始字符串。
立即学习“前端免费学习笔记（深入）”；
- 如果用了
@font-face，必须把整个声明块复制进内联<style></style>，且确保src路径在内联上下文中仍有效（推荐用 base64 或相对根路径） - 自定义属性要提前内联定义，例如在
最前面加：:root { --primary: #3b82f6; --spacing-sm: 0.5rem; } - 不要指望内联 CSS 能“继承”HTML 文档外的变量作用域——它就是独立的一小段样式表，范围仅限自身
