media属性能跳过css下载，但仅当条件正确、浏览器新版且设备匹配时生效；写错语法或旧浏览器会降级为media="all"，导致无效。
media 属性真能跳过 CSS 下载，但只在条件写对、浏览器够新、设备匹配时才生效——写错一个括号或漏掉 screen，它就退化成 media="all"，白费功夫。
media 值不匹配时，CSS 真的不会发请求
现代浏览器（Chrome 80+、Firefox 69+、Safari 14+）在 media 值明确不满足当前环境时，压根不发起 HTTP 请求。比如：<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"> 在桌面端（视口 > 768px）的 Network 面板里根本看不到 mobile.css 的请求记录。
但这依赖三个硬性前提：
-
media值必须包含媒体类型（如screen）+ 特性查询（如(max-width: 768px)），单独写media="(max-width: 768px)"在旧 Safari 或 Electron 中可能被整体忽略 - 语法不能出错：括号不闭合、空格多一个、用了已废弃值（如
handheld），浏览器会降级为media="all" - IE9 及更早版本完全无视
media，所有样式表照常下载；Android 4.4 WebView 也有类似问题，需额外兼容
多个 link 标签的 media 条件必须互斥
常见错误是断点没切开，导致两个样式表同时加载。例如：
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)"><link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
当视口宽度正好是 768px 时，两个条件都成立，浏览器会并发下载两份 CSS。
稳妥做法是用整数边界错开：
-
media="(max-width: 767px)"和media="(min-width: 768px)" - 加方向限定进一步收窄：比如
media="screen and (max-width: 767px) and (orientation: portrait)" - 避免用
not screen——部分 WebView 会直接忽略，不如显式写media="print, tv"
rel="preload" + media 才算真正按需预加载
rel="stylesheet" 的 media 控制“是否应用”，而 rel="preload" 的 media 才控制“是否发起请求”。想彻底跳过非目标设备的资源加载，得配对使用：
<link rel="preload" as="style" href="dark-theme.css" media="(prefers-color-scheme: dark)"><link rel="stylesheet" href="dark-theme.css" media="(prefers-color-scheme: dark)">
这样，深色模式未启用时，dark-theme.css 连预加载都不会触发。
注意两点：
-
rel="preload"必须带as="style"，否则浏览器无法识别资源类型 - 不能只靠
preload引入样式——它不解析也不应用，后面仍需补一个rel="stylesheet"节点 - 只对确定不会被 JS 动态加载的资源用它，否则可能重复 fetch
media 是静态声明，不随窗口变化自动切换
media 属性只在页面初始加载时起作用，缩放窗口或旋转手机时，已加载的样式表不会自动启停。比如横竖屏切换瞬间，media="screen and (orientation: landscape)" 和 media="screen and (orientation: portrait)" 的样式表可能短暂共存，引发意外交互。
要实现动态响应，得配合 JS：
- 用
window.matchMedia()监听变化 - 通过切换
<link>元素的disabled属性来启停样式 - 或者移除旧节点、插入新
<link>——比改disabled更可靠，尤其在 Safari 中
真正容易被忽略的是：media 不是 CSS @media 的替代品。它适合做资源级分离（比如打印样式完全独立），但复杂布局切换建议用单个 CSS 文件内的 @media 规则，语义清晰、维护成本低、无竞态风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
