media属性支持复合查询，但需严格遵循语法：必须带媒体类型前缀（如screen and）、括号闭合、英文符号、空格规范；非法写法会降级为media="all"；preload需as="style"且与stylesheet的media值完全一致。
media属性其实完全支持复合查询，问题出在写法不合法
浏览器对 media 属性的解析非常严格：只要括号不闭合、空格缺失、用了中文符号，或媒体类型缺失，它就直接降级为 media="all"，看起来像“不支持”，其实是语法没过。你看到的“不生效”，90% 是因为写了 media="(min-width: 768px) and (hover: hover)" 这种非法格式——and 不能直接写在括号外，必须用 screen and (...) 包裹。
- 正确写法必须带媒体类型前缀，比如
screen and (min-width: 768px) and (hover: hover) - 多个独立条件用英文逗号分隔，表示“或”关系：
screen and (min-width: 480px), screen and (min-resolution: 2dppx) -
not要谨慎使用：not screen在部分 WebView 中会被整条忽略，不如显式列出目标类型，如print, tv - 避免在括号内写空格不一致的表达式，比如
(min-width:768px)（冒号后无空格）在 Safari 12–13 中可能解析失败
为什么 DevTools 里还是看到了不该加载的 CSS
不是复合查询失效，而是浏览器根本没把它当复合查询处理。打开 Network 面板，筛选 .css，如果那个文件出现了，说明 media 值被判定为非法，已 fallback 到 media="all"。常见触发点：
-
media=""或media=" "（空字符串或纯空格）→ 等价于没写media -
media="(prefers-color-scheme: dark) and (prefers-reduced-motion: reduce)"→ 缺少screen and前缀，旧版 Safari 直接跳过整条<link> - 用了中文括号、顿号、冒号，或复制粘贴时带了不可见 Unicode 字符
- 断点重叠导致多个
<link>同时匹配，比如max-width: 768px和min-width: 768px在 768px 视口下共存
想真正按复合条件加载，得配 rel="preload"
rel="stylesheet" 的 media 只控制“是否应用”，而 rel="preload" as="style" 的 media 才控制“是否发起请求”。要确保深色+高对比度用户才下载 high-contrast-dark.css，必须这样写：
<link rel="preload" as="style" href="high-contrast-dark.css" media="screen and (prefers-color-scheme: dark) and (prefers-contrast: high)"><link rel="stylesheet" href="high-contrast-dark.css" media="screen and (prefers-color-scheme: dark) and (prefers-contrast: high)">
-
rel="preload"必须带as="style"，否则media被忽略 - 不能只留
preload—— 它不解析样式，后续仍需rel="stylesheet"补上 - 两个标签的
media值必须完全一致，否则行为不可预测
兼容性差的复合查询别硬扛
像 (prefers-reduced-motion: reduce) 在 Safari 14+ 才支持，(dynamic-range: high) 几乎没浏览器实现。真要覆盖老环境，优先用 JS 回退：
- 初始设
media="not all"或disabled，避免误加载 - 用
window.matchMedia()检测复合条件，匹配后再动态插入<link> - 不要监听
resize——它无法捕获系统级变化（如深色模式切换），且高频触发卡顿
最常被忽略的一点：media 属性只在 <link> 插入 DOM 时检查一次，JS 后续改 link.media 不会重新 fetch。想动态响应，要么重插节点，要么用 disabled 切换——但后者在 Safari 有缓存残留风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
