link标签的media属性决定css文件是否下载，语法为去掉@media和花括号后直接填入，如media="(max-width: 768px)"；它仅在html解析时静态匹配一次，不响应运行时变化，与css内@media正交且作用阶段不同。
直接在 <link> 标签的 media 属性里写查询条件，比在 CSS 文件里用 @media 更早生效、更轻量，适合分离设备专属样式表。
link 标签中 media 属性怎么写？
语法就是把原本写在 CSS 里的 @media 条件，去掉 @media 和花括号，直接填进 media 属性值里。浏览器加载时会先检查这个条件，不匹配就不下载该 CSS 文件。
-
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">—— 仅当视口宽度 ≤ 768px 时加载 -
<link rel="stylesheet" href="print.css" media="print">—— 仅打印预览时启用 -
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">—— 系统设为深色模式时加载 - 多个条件用
and连接：media="(min-width: 768px) and (orientation: landscape)" - 多条件“或”关系用逗号：
media="(max-width: 480px), (max-height: 320px)"
为什么有时 link 的 media 不生效？
常见原因是媒体特性未被当前浏览器支持，或条件写法触发了隐式 all 类型覆盖。比如：
- 写了
media="(min-width: 768px)"却没指定类型，默认是all，但某些旧版 Safari 对all下的min-width解析不一致 - 误写成
media="screen (min-width: 768px)"（缺and）—— 浏览器会忽略整条规则 -
device-width在现代移动端基本失效，因为视口缩放、UA 欺骗、iOS 的“桌面模式”都会干扰它；应优先用width或min-width - 在 HTTP/2 下，即使不匹配，浏览器也可能预加载
<link>资源（取决于服务器配置），造成误判“生效了”
link media 和 CSS 内 @media 哪个优先级高？
没有优先级高低之分，它们是不同阶段的控制点：前者决定“要不要加载这个文件”，后者决定“加载后哪些规则生效”。如果 <link media="print"> 加载了一个含 @media screen 的 CSS，那里面的 screen 规则根本不会运行——因为整个文件只在 print 场景下被解析。
- 想做彻底的资源隔离（比如手机端不下载桌面 JS/CSS），用
<link media> - 想复用同一份 CSS、只切换局部样式，用
@media块 - 混合使用时注意：CSS 文件内
@media (print)与外部<link media="print">是正交的，不冲突，但语义重复
真正容易被忽略的是：media 查询在 <link> 中不支持 JavaScript 表达式、不能响应运行时变化（比如用户旋转屏幕后动态切换），它只在资源请求那一刻求值。需要动态响应时，必须回到 CSS 内的 @media 或 JS 配合 window.matchMedia()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
