现代浏览器对media属性支持良好，只要写法正确，不匹配的css文件根本不会发起网络请求；写错则降级为media="all"，导致全量加载，验证需通过devtools network面板确认请求是否消失。
现代浏览器对 media 属性支持良好，只要写法正确，不匹配的 CSS 文件根本不会发起网络请求——这才是真正意义上的“按需”，不是加载完再丢弃，也不是靠 JS 控制时机来掩盖问题。
media 属性写错就失效，浏览器直接当 media="all" 处理
很多人以为加了 media="(max-width: 768px)" 就万事大吉，结果桌面端 Network 面板里依然看到 mobile.css 被下载。常见原因：
-
media="screen and (max-width: 768px)"中多了一个空格或括号没闭合 → 浏览器无法解析 → 降级为media="all" - 写成
media="print"却指望它响应窗口缩放 → 它只在打印预览时触发，且旧版 Safari 可能仍会预取 - 在 Android WebView（尤其旧版）或 IE11 中，
media几乎不生效，所有样式都会下载
验证是否真跳过下载：打开 DevTools → Network → 刷新页面 → 找对应 CSS 文件 → 看 Initiator 是否为 parser，状态码是 200，且只在匹配条件下出现。
rel="preload" + onload 是唯一靠谱的异步加载方案
适用于首屏不可见但后续必用的样式，比如弹窗、图表、折叠面板。它不阻塞渲染，又比纯 JS 插入更可控，但必须同时满足三个条件：
-
rel="preload"：告诉浏览器“这个资源我要用” -
as="style"：否则只是普通 fetch，不提升优先级，也不触发 CSS 解析流程 -
onload="this.rel='stylesheet'"：否则样式永远不会生效
IE 完全不支持 onload，必须加降级：<noscript><link rel="stylesheet" href="charts.css"></noscript>。还要注意：href 字符串必须完全一致（大小写、斜杠、查询参数），否则 preload 和后续的 stylesheet 被视为两个不同资源。
动态插入 <link> 前必须查重，否则 SPA 里反复加载
单页应用中，路由切换、组件挂载/卸载频繁，很容易重复插入同一份 CSS。错误做法包括：
- 每次调用都
document.head.appendChild(link)→ 同一文件可能加载 N 次 - 用
document.write()插入 → 页面加载完成后调用会清空整个文档 - 用 class 或 id 判断是否已存在 → 不可靠，多个组件可能共用一个 class
正确做法是用 document.querySelector(<code>link[href="${href}"]) 查路径。注意路径要完全一致：styles.css?v=1 和 styles.css?v=2 是两个资源。如果路径含运行时变量（如地区代码 zh-CN.css），确保构建工具（webpack/vite）能在编译期静态分析，否则可能被打包进主包。
media 控制下载，CSS 内部 @media 控制应用，二者不能混用
media 属性只在 HTML 解析阶段判断一次，决定要不要下载该文件。一旦下载完成，里面的所有样式就会生效，哪怕用户之后缩放窗口、切深色模式，也不会自动失效或重新加载。
想让样式随窗口变化？必须在 CSS 文件内部写 @media (max-width: 768px) { ... }。想节省带宽、避免手机下载大屏 CSS？才轮到 media 属性出场。
最稳妥的组合是：<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)"> + mobile.css 里也套一层 @media (max-width: 768px)。前者管“要不要下”，后者管“什么时候起效”。很多团队只做后者，结果首屏就加载了全部响应式样式，白瞎了带宽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
