media属性需设为永远不匹配的值（如"not all"）才能真正延迟加载，设为"print"或响应式查询仅按需加载；动态切换需重插节点或禁用再启用；内联css须包含@font-face和:root声明。
media属性怎么写才真正延迟加载
写错media值，CSS照样阻塞渲染。浏览器只在media当前不匹配时跳过下载——不是“看起来像条件”，而是“此刻不成立”。media="screen"等价于不写，media="all"也一样；media="print"在非打印场景下才真正异步。
常见错误：media="(max-width: 768px)"在桌面访问时确实不触发，但若用户用响应式调试工具切到手机尺寸，它就立刻加载——这不是“延迟”，是“按需”。真要彻底不加载，得用media="not all"这种永远不匹配的值。
-
media="not all"：初始完全不请求，JS切换后才拉取（最稳妥） -
media="print"：仅在调出打印预览时加载（兼容性好） -
media="(min-width: 1024px) and (orientation: landscape)"：横屏大屏才生效，竖屏手机/平板直接跳过 - 避免
media="screen"或空media——它们都等于阻塞式加载
动态切换media后样式为啥不生效
改link.media只是更新DOM属性，浏览器不会重新发起请求或重算样式。它只在<link>插入DOM那一刻检查一次media是否匹配。
所以单纯赋值link.media = "(min-width: 768px)"没用，必须让浏览器“再看一遍”这个节点。
- 推荐做法：先
link.remove()，再document.head.appendChild(link) - 替代方案：设
link.disabled = true，再改media，再设link.disabled = false（Safari偶有缓存残留） - 别在改
media前动link.href——href变更会触发新请求，但media不匹配时请求会被取消，白跑一趟
提取关键CSS时media查询容易丢
很多工具（比如critters）默认只提取无@media的规则。结果PC端正常，手机打开一片空白——因为@media (max-width: 768px)里的.header样式根本没进内联<style></style>里。
关键不是“有没有媒体查询”，而是“当前设备下哪些@media块实际生效”。移动端访问时，@media (prefers-color-scheme: dark)可能比桌面版更关键。
- 用
critters必须显式开includeMediaQueries: true - 手动生成时，别只复制
{}，要整块复制@media语句，包括嵌套编译后的多个独立@media块 - 禁用JS后仍显示的首屏结构（如logo、主图容器），其对应
@media规则必须内联，否则布局直接崩
内联关键CSS后@font-face和CSS变量失效
内联的<style></style>标签不支持@import，也无法引用外部定义的@font-face或:root自定义属性——哪怕那些定义就在同一个HTML里，只要不在同一处内联，就不可见。
这不是bug，是规范限制：内联样式表作用域封闭，不继承外部CSSOM。
- 解决方案：把
@font-face和:root声明也一并内联到<style></style>里 - 如果字体文件路径依赖构建产物（如
fonts/inter-var.woff2），确保该路径在内联时仍有效 - 避免在内联
<style></style>里用var(--color-primary)却把--color-primary定义在外部main.css中
media属性本身很轻量，但组合使用时每个环节都得对齐：提取时保@media、内联时带@font-face、切换时重插节点——漏掉任意一环，首屏就可能白屏或错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
