是唯一符合现代规范、可实际按条件引入外部 CSS 的方式，浏览器根据 media 值是否匹配当前环境决定下载与应用；@import 因同步阻塞、无法预加载且破坏渲染流程，不适合条件引入。
是唯一符合现代规范、可实际按条件引入外部 CSS 的方式。其他手段要么语义错误，要么破坏性能或兼容性。
用
浏览器在解析 HTML 时，会根据 media 属性值是否匹配当前环境，决定是否发起网络请求并应用该样式表。
- 匹配时（如
media="(max-width: 768px)"且视口宽度 ≤ 768px）：下载 + 解析 + 应用 - 不匹配但语法合法（如
media="print"在屏幕浏览中）：多数现代浏览器仍会下载，但跳过渲染计算 - 不匹配且语法无效（如
media="not all"或拼写错误）：直接跳过下载，不触发请求 - 推荐写法：使用标准媒体特性，例如
media="(prefers-color-scheme: dark)"、media="screen and (min-width: 992px)"
为什么不能用 @import 做条件引入
@import 不是 HTML 资源加载机制，而是 CSS 规则级导入指令，它从设计上就违背“按需”原则。
- 必须出现在 CSS 文件顶部（或
块首行），否则整条规则被静默丢弃 - 同步阻塞：浏览器必须等前一个 CSS 文件下载解析完，才发起
@import指向的请求，导致 LCP 延迟 - DevTools 明确标记为
blocking，无法被预加载器识别，也不支持fetchpriority或as="style" - 即使写了
@import url("dark.css") (prefers-color-scheme: dark)，也无法在 JS 运行后动态取消或重载 - 404 时整个所在 CSS 文件的后续规则都会失效——不是跳过，是直接中断解析
需要运行时判断时，必须用 JS 动态创建
当条件依赖 JS 状态（如 localStorage 主题偏好、用户手动切换、UA 特征检测）， 静态声明就不够用了。
- 用
window.matchMedia()检查当前是否满足媒体查询条件，例如window.matchMedia('(prefers-color-scheme: dark)').matches - 满足时再
document.createElement('link')，设rel="stylesheet"、href和唯一id - 插入到
document.head；后续要卸载（如切回 light 主题），直接document.getElementById('dark-theme')?.remove() - 注意：不要用
document.write或修改内容来模拟，那只是内联样式，不产生新资源请求，也不走缓存
真正容易被忽略的是：media 属性只控制“是否参与渲染”，不改变 CSS 文件内部选择器的作用域——哪怕 media="print"，里面写的 body { background: red } 在打印预览里生效，在屏幕上就是彻底不可见，不是“没生效”，是根本没进样式计算流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
