media属性是浏览器决定是否发起HTTP请求的第一道闸门，语法错误（如括号不闭合、缺媒体类型）会导致降级为media="all"，必须满足语法合法、媒体类型明确、断点互斥三条件才真正跳过下载。
media 属性不是“让样式失效”的开关，而是浏览器决定“要不要发 HTTP 请求”的第一道闸门——写错一个括号，它就退化成 media="all"，白加。
为什么写了 media="(max-width: 768px)" 桌面端还在下载 CSS
这不是 bug，是降级：浏览器解析失败时，直接当没写 media，按 media="all" 处理。常见原因有：
-
media="(max-width: 768px)"缺少媒体类型前缀（如screen and），旧版 Safari、Electron 会整条忽略 - 括号不闭合、空格多一个、用了中文括号或逗号，导致语法非法
-
media=""或属性值为空字符串，等价于未设media - IE9 及更早版本完全无视
media，所有<link rel="stylesheet">都强制下载
验证方式只有一种：打开 DevTools → Network → 刷新 → 筛选 .css → 看目标文件是否根本没出现在列表里。出现了，说明没跳过。
media 值怎么写才真正生效
必须同时满足三个硬性条件：语法合法、媒体类型明确、断点互斥。推荐写法：
- 统一用
screen and (min-width: 768px)，不用单独的(min-width: 768px) - 断点切开：用
screen and (max-width: 767px)和screen and (min-width: 768px)，避免 768px 重叠 - 避免
not screen—— 部分 WebView 会直接忽略；如需排除屏幕，显式写media="print, tv" - 组合多个条件用英文逗号分隔：
screen and (min-width: 480px), screen and (min-resolution: 2dppx)
media="print" 是少数能稳定触发异步加载的值：它不阻塞 HTML 解析，但仅在打印上下文激活，日常浏览中 Network 面板里压根看不到请求。
rel="preload" + media 才算真·按需预加载
rel="stylesheet" 的 media 控制“是否应用”，而 rel="preload" 的 media 才控制“是否发起请求”。想彻底跳过非目标设备的 fetch，必须配对使用：
<link rel="preload" as="style" href="dark-theme.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="dark-theme.css" media="(prefers-color-scheme: dark)">
关键点：
-
rel="preload"必须带as="style"，否则浏览器无法识别资源类型，media被忽略 - 不能只靠
preload引入样式——它不解析也不应用，后面仍需补rel="stylesheet" - 只对 JS 不会动态引入的资源用它，否则可能重复加载
深色模式未启用时，dark-theme.css 连预加载都不会触发。
动态切换 media 值为什么无效
浏览器只在 <link> 插入 DOM 时检查一次 media 是否匹配，之后改 link.media 属性不会触发重加载。例如：
link.media = "(min-width: 1024px)"; // 这行代码只是改属性，样式不会自动生效
正确做法是移除再重插：
link.remove(); document.head.appendChild(link);
或者用 link.disabled = true/false 更轻量，但 Safari 偶有缓存残留，不推荐单独依赖。监听要用 window.matchMedia()，别用 resize —— 后者高频触发、无法捕获系统级变化（如深色模式切换）。
最易被忽略的点：任何 media 行为都只在 HTML 解析阶段生效，且是否跳过请求，最终得看 DevTools Network 里那个文件到底出没出现——别的都是推测。
