现代浏览器在media值合法且不匹配时确实跳过css下载，但需严格遵循规范：必须指定媒体类型（如screen）、语法完整、无空格或括号错误；否则降级为all导致强制加载。
media属性真能跳过CSS下载吗
现代浏览器（Chrome 80+、Firefox 69+、Safari 14+）在 media 值合法且匹配失败时，确实不会发起 HTTP 请求——但前提是写法完全正确。它不是“可能跳过”，而是“严格按规范解析后跳过”。
常见失效原因包括：
-
media="(max-width: 768px)"缺少媒体类型（如screen），旧版 Safari/Electron 会降级为media="all"，强制加载 -
media="screen and (min-width: 769px) "末尾多一个空格，导致语法错误，同样退化为all -
media="print"在非打印预览下通常不下载，但部分旧版 Safari 仍会预取，不可靠
验证是否真跳过：打开 DevTools → Network → 刷新 → 筛选 Initiator 为 parser 且状态码为 200 的请求，只在匹配条件下出现才算生效。
怎么写才不被当成all
必须用合法媒体查询语法，且媒体类型不能省略（除非是 print 这类明确类型）。screen 是最常用也最稳妥的媒体类型。
正确写法示例：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)"><link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px)">
错误写法示例：
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)"><!-- 缺少 screen --><link rel="stylesheet" href="desktop.css" media="screen and (min-width: 769px) and"><!-- 语法不完整 -->
注意：and 前后必须有空格；括号必须闭合；断点数值之间不能重叠（比如 max-width: 768px 和 min-width: 768px 会导致两者同时命中）。
为什么移动端首次加载还是下了两个CSS
这不是 bug，是规范行为：只要 rel="stylesheet" 存在，浏览器就会预加载（preload）所有 CSS，media 只控制是否应用，不阻断初始 fetch——尤其当多个 link 的 media 条件存在交集或未严格互斥时。
典型问题场景：
- 写了
mobile.css（max-width: 768px）和tablet.css（min-width: 768px），768px 边界值被两个都匹配 - 漏了
and (orientation: portrait)，导致横屏手机也触发mobile.css下载 - 用了
rel="preload"+media，但preload无视media，强制拉取
真正想避免下载，得放弃纯 HTML 方案：用 JS 检测 window.matchMedia() 后动态插入 <link rel="stylesheet">，或服务端根据 UA/CH-UA-Mobile 注入对应 link。
更推荐的做法：别分文件，用单 CSS + @media
绝大多数项目该放弃用多个 link 分设备加载，转而用一个 CSS 文件 + 内部 @media 规则。这不是妥协，是更可控的工程选择。
理由很实际：
- 层叠顺序清晰：所有规则在同一作用域，优先级可预测，不会因加载顺序错乱导致样式覆盖
- 无动态失效风险：窗口缩放、横竖屏切换时，
@media实时响应；link media只在 HTML 解析阶段判断一次 - 构建友好：Webpack/Vite 能提取关键 CSS、压缩重复声明、甚至用
clamp()替代部分断点 -
<meta name="viewport">必须配齐，否则@media全部失效——这点比media属性更基础，也更容易被忽略
最后提醒一句：你以为删掉一个 <link media> 就省了请求，其实没省；而把断点全塞进一个文件，反而更容易压体积、控层叠、做 CI 检查。真正难的不是写 media，是让所有断点不打架、不遗漏、不重复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
