link标签的media属性支持完整的css媒体查询语法，如(min-width: 768px)、(prefers-color-scheme: dark)、(hover: hover)等；浏览器在html解析阶段静态匹配，仅当条件满足时才下载并应用css文件，不匹配则完全跳过请求。
link标签的media属性支持哪些媒体查询语法
HTML <link> 标签的 media 属性不是只认 screen 或 print 这种简单值，它完整支持 CSS 媒体查询语法，包括 min-width、max-height、prefers-color-scheme、hover 等。浏览器会实时评估这些条件，仅当匹配时才下载并应用对应样式表。
注意：媒体查询在 <link> 中是“阻塞式判断”——如果条件不满足，资源根本不会发起请求（这点和 CSS 内部 @media 完全不同）。
-
media="screen and (min-width: 768px)"：仅在视口 ≥ 768px 时加载该 CSS -
media="(prefers-color-scheme: dark)"：仅在系统设为深色模式时加载暗色主题 CSS -
media="print"：打印时才生效（传统用法，仍完全有效） -
media="not screen"：排除屏幕设备（比如只给语音阅读器用）
为什么写了media却没生效？常见失效原因
最常踩的坑是媒体查询写法不符合规范，或忽略了浏览器对初始匹配时机的限制。
- 不能用 CSS 中允许的简写形式，比如
media="(width >= 768px)"是非法的——必须用标准语法min-width/max-width - 使用
orientation时，部分旧版 iOS Safari 不支持动态重匹配（转屏后不会重新加载） -
media值为空字符串或无效语法（如漏了括号、拼错关键字），浏览器会当作media="all"处理，导致误加载 - 在
中多个<link media="...">同时存在时，若条件有重叠（如一个写min-width: 768px，另一个写min-width: 767px），可能因加载顺序/缓存导致预期外的覆盖
如何配合preload做渐进式样式加载
单纯用 media 可防止不必要加载，但无法优化“匹配时的首屏延迟”。这时候可以结合 <link rel="preload"> 提前拉取关键响应式样式。
例如针对桌面端主样式：
<link rel="preload" href="desktop.css" as="style" media="(min-width: 1024px)"><link href="desktop.css" rel="stylesheet" media="(min-width: 1024px)">
注意点：
-
rel="preload"的media必须和后续rel="stylesheet"完全一致，否则预加载会被忽略 - 不要对所有响应式样式都
preload，只选首屏关键路径中真正会用到的那个 -
preload不触发渲染阻塞，但stylesheet仍会阻塞渲染——所以它解决的是“下载慢”，不是“阻塞久”
JS 动态切换 media 值是否可靠
可以改，但不推荐用于核心响应逻辑。
运行时修改 <link> 元素的 media 属性，浏览器会立即重新评估并触发加载/卸载（如从 max-width: 600px 改成 min-width: 601px，原样式会被移除，新样式若匹配则加载）。
- 适合做小范围状态切换，比如手动切换深色模式：
link.media = "(prefers-color-scheme: dark)"; - 不适合监听
resize频繁修改——每次改都会触发样式重计算，性能差，且可能引发 FOUC - 改完后无法通过
getComputedStyle检查是否已生效，得监听load或检查sheet.cssRules长度
真正需要动态响应的场景，优先用 CSS 内部 @media + 自定义属性，而不是靠 JS 切换 <link> 的 media。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
