link标签的media属性仅对rel="stylesheet"生效，用于控制css文件是否下载，匹配时才发起请求；其值须严格遵循规范，如“screen and (min-width: 768px)”，错误语法将退化为all；它早于@media规则介入加载流程，但不响应运行时变化。
media 属性只在 link 标签中生效，且仅对 rel="stylesheet" 有效
直接写 <link rel="stylesheet" media="print" href="print.css"> 才会按条件加载；如果 rel 是 "preload"、"prefetch" 或其他值，media 会被完全忽略——浏览器压根不检查它。常见错误是把响应式预加载和样式加载混在一起，结果样式没加载，还以为是媒体查询写错了。
实际生效逻辑是：浏览器先解析 media 值是否匹配当前环境，匹配才发起 CSS 文件请求并应用；不匹配则跳过下载（注意：不是下载后不应用，是根本不发请求）。
支持的 media 类型和常见写法要严格匹配规范
media 值必须是 CSS 媒体类型 + 可选媒体特性，中间用空格分隔，多个条件用 and 连接，不能用逗号或括号嵌套。比如：
-
media="screen and (min-width: 768px)"✅ 正确 -
media="screen, (min-width: 768px)"❌ 逗号表示“或”，但screen和括号内不是同级类型，解析失败，退化为默认（通常等价于all） -
media="(max-width: 480px) and print"❌ 顺序错，print是类型，必须放最前 -
media="not screen and (orientation: landscape)"❌not必须包裹整个表达式：media="not (screen and (orientation: landscape))"
移动端适配最常用的是 screen and (max-width: 480px)，但注意：iOS Safari 在横屏时可能报告错误的 device-width，建议优先用 width 而非 device-width。
与 @media 规则相比，link 的 media 更早介入资源加载流程
<link media="..."> 是 HTML 解析阶段就决定是否发起网络请求；而 @media 写在 CSS 里，文件已下载完成才做规则匹配。这意味着：
- 用
link+media可真正节省带宽（小屏设备不下载桌面版 CSS） - 但无法实现“同一份 CSS 文件内切换”——比如深色模式切换必须依赖
@media (prefers-color-scheme: dark)，因为link的media不监听运行时变化 - 若同时存在
<link media="screen">和<link media="print">，打印时只会加载后者，前者被忽略（包括其中的@media screen规则）
调试时注意 Chrome DevTools 的 Network 面板不会显示“被跳过的 link”
如果 media 不匹配，对应 CSS 文件根本不出现在 Network 列表里——这不是 bug，是预期行为。容易误判为路径写错或服务器问题。验证方法只有两个：
- 临时改成
media="all"，看文件是否出现在 Network 中 - 在控制台执行
matchMedia("(your-query)").matches，确认当前环境是否真匹配（比如matchMedia("screen and (min-width: 1200px)").matches）
另外，media 对 JS 动态插入的 link 同样有效，但插入时机影响首次渲染：如果 JS 在 DOMContentLoaded 后才加 link，即使 media 匹配，样式也会延迟应用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
