media属性是“条件启用开关”而非“条件加载开关”，现代浏览器仅在媒体查询语法正确且当前环境不匹配时才跳过css下载；否则仍会全量加载。
media 属性不是“条件加载开关”，而是“条件启用开关”——它控制样式是否生效，但不保证文件不被下载。现代浏览器（Chrome 80+、Firefox 69+、Safari 14+）在媒体查询**明确不匹配且语法正确**时，才会跳过网络请求；写错、留空或降级为 all，就全量加载。
为什么写了 media="(max-width: 768px)" 桌面端还在下载 mobile.css？
这是最常踩的坑：你以为写了 media 就能按需，实际浏览器只在满足两个前提时才跳过请求——media 值是合法 CSS 媒体查询，且当前环境不匹配该查询。
-
media="screen and (max-width: 768px)"中多一个空格、括号没闭合、用了中文括号 → 解析失败 → 浏览器当作media="all"处理 → 强制下载 -
media=""或media="screen"等价于未设 media → 所有设备都加载 - 旧版 Android WebView、IE 无视
media，一律下载 - 调试时看 Network 面板：
Initiator列必须是parser，状态码为200，才说明是 HTML 解析阶段触发的条件加载；如果是script或空白，说明 JS 干预了，或根本没生效
rel="preload" as="style" + onload 是真异步加载，但必须三要素齐全
当 CSS 只用于折叠面板、弹窗、图表等首屏不可见区域时，用 rel="preload" 是更可靠的“按需”方案——但它不是简单替换 rel="stylesheet"，漏掉任一环节就失效。
- 必须写
rel="preload" as="style"：漏掉as="style"，浏览器只当普通资源 fetch，不提升优先级，也不阻塞渲染 - 必须绑定
onload="this.rel='stylesheet'"：否则预加载完也不会应用样式 - 不能用
href动态赋值后再改media：href 变更会触发新请求，而 media 不匹配时请求可能被取消，造成冗余 - 示例：
<link rel="preload" as="style" href="modal.css" onload="this.rel='stylesheet'">
JS 动态切换 media 值后样式不生效？因为浏览器不监听 change
link.media = "(min-width: 1024px)" 这行代码只是改属性，不会触发重加载或重计算。浏览器只在 <link> 插入 DOM 时检查一次 media 是否匹配。
- 正确做法是移除再重插：
link.remove(); document.head.appendChild(link); - 用
link.disabled = true/false更轻量，但 Safari 偶有缓存残留，不推荐单独依赖 - 监听要用
matchMedia()，别用resize：后者高频触发、性能差，且无法捕获系统级变化（如深色模式切换） - 初始状态建议设
media="not all"或disabled="true"，避免误加载
真正按需的关键不在怎么写 media，而在确认它是否被浏览器当作「不匹配」处理——这取决于语法合法性、运行时环境、以及你有没有在 DevTools 里亲眼看到那个请求消失。任何依赖 JS 切换的方案，都要先验证初始状态是否真的跳过了下载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
