link 标签的 media 属性用于条件应用 css，浏览器仍下载所有带 href 的 link，但仅在匹配媒体查询时解析和应用样式；适用于打印、无障碍偏好、响应式布局等静态可预判场景。
link 标签的 media 属性能做什么
它不是“条件加载 CSS”，而是“条件应用 CSS”——浏览器仍会下载所有带 href 的 <link>，但只在匹配 media 时才解析和应用其中样式。这意味着：不节省网络请求量，但能避免样式冲突、减少渲染阻塞。
什么时候该用 media 而不是 JS 动态插入
适合静态、可预判的设备或视口特征，比如打印、高对比度模式、横竖屏切换。JS 插入更灵活但有延迟，且无法被预加载器识别。
-
media="print"：确保打印时隐藏广告、导航栏等非内容元素 -
media="(prefers-reduced-motion: reduce)"：禁用动画，满足可访问性要求 -
media="(min-width: 768px)"：仅在平板及以上尺寸启用栅格布局 CSS - 避免写
media="screen and (max-width: 480px)"这类冗余表达，screen是默认类型，可省略
media 值不生效的常见原因
最常踩的坑是媒体查询语法错误或浏览器不支持特性。例如：
media="(width ❌ —— CSS 媒体查询不支持比较运算符，必须用 <code>max-width-
media="not all and (min-resolution: 2dppx)"❌ ——not必须紧贴媒体类型，正确写法是media="not all and (min-resolution: 2dppx)"（注意空格），但更推荐用not all或直接换逻辑 - 使用
hover或any-hover时，部分移动浏览器（如 Safari iOS）行为不一致，需搭配pointer检查 - 如果页面已用
<meta name="viewport">，width媒体特性匹配的是视口宽度，不是设备物理宽度
完整示例：按设备能力分层加载
以下写法让浏览器并行下载三份 CSS，但只激活匹配的一份（注意：不是“只下载一份”）：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="print.css" media="print"> <link rel="stylesheet" href="motion-off.css" media="(prefers-reduced-motion: reduce)"> <link rel="stylesheet" href="high-dpi.css" media="(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)">
其中 high-dpi.css 使用了带前缀和标准写法的双重判断，因为 -webkit-min-device-pixel-ratio 在旧版 Safari 中更可靠，而 min-resolution 是标准属性。两者用逗号分隔表示“或”关系。
真正需要“按需下载”的场景（比如用户点了深色模式开关才拉 dark.css），得用 rel="preload" + fetch() + insertRule 或动态 <link>，这时候 media 就不是主角了。
