media属性仅对rel="stylesheet"有效，因浏览器只在此类link标签中解析media值；其他rel类型如preload会完全忽略media，且错误写法会导致样式文件不发起请求。
必须用 rel="stylesheet" + media 属性组合，且值要严格符合 CSS 媒体查询语法；写错、漏写或放错位置，样式文件根本不会发起请求。
为什么 media 属性只对 rel="stylesheet" 有效
浏览器只在 rel="stylesheet" 的 <link> 上解析 media 值。如果写成 rel="preload" 或 rel="prefetch"，media 会被完全忽略——连语法检查都不会做。
-
<link rel="stylesheet" media="print" href="print.css">✅ 实际打印时才下载 -
<link rel="preload" media="print" href="print.css" as="style">❌media被无视，会立即预加载 -
<link rel="stylesheet" media="screen and (min-width: 768px)" href="desktop.css">✅ 匹配才请求 -
<link rel="stylesheet" media="screen, (min-width: 768px)" href="desktop.css">❌ 逗号导致解析失败，退化为all，小屏也下载
media 值写错的典型现象和调试方法
错误的 media 值不会报错，但对应 CSS 文件压根不会出现在 Network 面板里——这不是路径问题，是浏览器根本没发请求。
- 常见错误写法：
media="(max-width: 480px) and print"（类型顺序错）、media="not screen and (orientation: landscape)"（not未包裹整个表达式） - 正确写法必须是：媒体类型开头，条件用
and连接，括号嵌套完整，例如media="not (screen and (orientation: landscape))" - 移动端建议优先用
width而非device-width，iOS Safari 横屏时device-width可能返回错误值 - 调试时别只看 Elements 面板，一定要去 Network 面板确认该 CSS 文件是否出现——不出现 =
media不匹配或写法非法
和 @media 规则的根本区别在哪
<link media=""> 在 HTML 解析阶段就决定是否发起网络请求；@media 是 CSS 下载完成后才做的规则匹配。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 用
link+media真的能省带宽（小屏不下载桌面 CSS） - 但它无法响应运行时变化：比如用户手动切换深色模式，
media="(prefers-color-scheme: dark)"只在页面首次加载时判断一次，之后系统改了设置也不会重新加载 - 若需动态切换主题，必须配合
@media (prefers-color-scheme: dark)写在同一份 CSS 里，或者用 JS 切换<link disabled> - 同时存在
<link media="screen">和<link media="print">时，打印预览只会加载后者，前者及其内部所有@media screen规则均被跳过
最容易被忽略的是：media 值不是“写了就能用”，它必须在 HTML 解析完成前就通过语法校验，且匹配当前环境；一旦出错，没有警告，只有静默失效——你得习惯去 Network 面板找“消失的请求”，而不是盯着控制台等报错。
