media属性决定是否发起HTTP请求，不匹配时文件根本不会下载；缺screen and前缀会导致浏览器降级为all，旧版Safari等可能忽略或误加载。
media 属性决定浏览器是否发起对 CSS 文件的 HTTP 请求——不匹配时，文件根本不会出现在 Network 面板里，不是“加载后不生效”，而是“压根不下载”。
为什么写了 media="(max-width: 768px)" 桌面端还在加载 CSS
这不是 bug，是语法降级：浏览器解析失败时，自动当作 media="all" 处理。常见原因包括：
-
media="(max-width: 768px)"缺少媒体类型前缀（如screen and），旧版 Safari 或 Electron 会直接忽略整条<link> - 括号没闭合、多一个空格、用了中文括号或逗号
-
media="mobile"这类非法值，现代浏览器一律退化为all - IE9 及更早版本完全无视
media，所有样式表无条件加载
验证方式只有一种：DevTools → Network → 刷新 → 筛选 .css → 看目标文件是否根本没出现。
screen and (min-width: 768px) 和 (min-width: 768px) 有区别吗
有，而且影响实际生效范围：
立即学习“前端免费学习笔记（深入）”；
-
screen and (min-width: 768px)✅ 显式声明媒体类型 + 特性，兼容性更好，Safari 14+、Chrome 80+、Firefox 69+ 均稳定支持 -
(min-width: 768px)❌ 旧版 Safari（如 iOS 13.7）可能不识别，部分 WebView 直接跳过该<link> - 单独写
media="screen"覆盖太宽，无法做断点控制；media="all"等价于不写，失去按需意义
推荐统一用 screen and 前缀，避免隐性兼容问题。
多个 <link media="..."> 同时存在时怎么避免重复加载
关键在断点互斥，否则 768px 视口下两份 CSS 都会被拉下来：
- 错误写法：
max-width: 768px和min-width: 768px—— 在宽度恰好为 768px 时两者同时匹配 - 正确切法：
max-width: 767px和min-width: 768px，不留缝隙也不重叠 - 若需进一步限定，可叠加
and (orientation: portrait)，但注意横竖屏切换瞬间可能短暂共存 - 不要依赖
not screen，部分 Android WebView 会直接忽略整个规则
真正省带宽的前提，是每个 media 值在当前环境下最多只命中一个。
rel="preload" + media 才是真·按需预加载
rel="stylesheet" 的 media 控制“是否应用”，而 rel="preload" 的 media 才控制“是否发起请求”：
- 必须配对使用：
<link rel="preload" as="style" href="dark.css" media="(prefers-color-scheme: dark)">+ 对应的<link rel="stylesheet" ...> -
as="style"不可省略，否则浏览器无法识别资源类型，media被忽略 - 深色模式未启用时，
dark.css连预加载都不会触发 - 仅适用于 JS 不会动态引入的样式，否则可能重复 fetch
静态 HTML 场景下，这是目前最可控的“零 JS、真跳过”方案；但要注意，它不解决运行时响应式切换问题——那得靠 CSS 内部的 @media 规则。
