link标签的media属性决定浏览器是否下载、解析并应用css文件，不匹配时资源不请求；它静态生效，不随窗口变化自动切换，需js配合disabled或重插节点实现动态响应。
link 标签的 media 属性不是“可有可无的装饰”，它直接决定浏览器是否下载、解析并应用对应 CSS 文件——哪怕样式表本身语法完全正确，media 值不匹配，样式就等于不存在。
media 属性值不匹配时，CSS 文件根本不会被解析
很多人以为 media 只是“隐藏样式效果”，其实更底层：浏览器会根据 media 查询结果跳过整个资源加载流程（除非是 print 等特殊情形，部分浏览器仍会预加载）。这意味着：
- 写成
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)">，在桌面宽屏下，mobile.css不会被请求（DevTools Network 面板里看不到） - 写成
media="not screen"或无效语法如media="handheld"（已废弃），现代浏览器按media="all"处理，但行为不可靠，应避免 -
media是静态声明，不随窗口缩放动态切换已加载的样式表；要响应式切换，得配合 JavaScript 监听resize并手动切换disabled属性
常用 media 值的实际含义和兼容性注意点
media 支持媒体类型（如 screen、print）和媒体特性查询（如 (prefers-color-scheme: dark)），但不是所有组合都安全：
-
media="screen"：适用于大多数屏幕设备，但不含智能手表、车载屏等新兴设备，建议优先用media="all"或具体特性查询 -
media="print"：打印时生效，注意：Chrome 和 Edge 在“另存为 PDF”时也触发，但 Safari 有时忽略@page规则 -
media="(min-width: 768px)"：必须加括号，漏掉会当作无效值退化为all；IE10+ 支持，IE9 及以下不识别，需配media="screen"降级 -
media="(prefers-reduced-motion: reduce)"：动画敏感用户开启系统设置后才启用，但 Safari 14+ 才支持，旧版需 JS 检测window.matchMedia
多个 link 标签 + media 的加载优先级与冲突处理
当多个 link 同时满足当前环境的 media 条件时，它们的 CSS 规则会按 HTML 中出现顺序层叠，但加载行为受两个关键因素影响：
- 浏览器可能并发加载多个 CSS，但解析和渲染阻塞仍按顺序进行；把关键样式（如排版、按钮）的
link放前面，非关键（如动画、主题色）放后面 - 不要依赖
media来“禁用”样式：比如用media="screen and (orientation: landscape)"加载横屏样式，同时又用media="screen and (orientation: portrait)"加载竖屏样式——两者在旋转瞬间可能短暂共存，导致意外交互 - 若想彻底隔离，推荐单个 CSS 文件内用
@media规则，而非拆成多个link；link+media更适合资源级分离（如 print.css 完全独立）
真正难的不是写对 media 值，而是预判不同设备、系统设置、浏览器版本下它的实际表现。本地测试时别只盯着 Chrome DevTools 的设备模拟器——真机横竖屏切换、Windows 高对比度模式、macOS 深色自动切换，都会让 media 表现出意料之外的行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
