link标签的media属性能实现CSS按需下载，但仅限现代浏览器且写法必须规范；它只控制文件是否发起HTTP请求，不控制样式生效逻辑，后者由CSS内部@media规则决定。
link 标签的 media 属性确实能实现 CSS 按需下载，但前提是写法严格、场景明确、浏览器版本够新——不是所有“看起来像媒体查询”的写法都管用。
media 属性只控制下载时机，不控制样式生效逻辑
很多人把 media="(max-width: 768px)" 和 CSS 里的 @media 规则混为一谈。其实两者完全独立：media 属性只告诉浏览器“这个文件要不要发 HTTP 请求”，而真正决定某条样式是否起作用的，是 CSS 文件内部是否用 @media 包裹了那条规则。
举个例子：
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
如果 mobile.css 里写了 .header { color: red }（没套 @media），那它在所有匹配该 media 条件的设备上都会加载并生效；但如果用户缩放窗口导致视口变宽，这个样式不会自动失效——因为 media 只在 HTML 解析阶段判断一次。
立即学习“前端免费学习笔记（深入）”；
- 想让样式随窗口动态变化？必须用 CSS 内部的
@media规则 - 想节省带宽、避免加载大屏 CSS 到手机？
media属性才管这事 - 二者配合用可以：用
media控制下载，用@media控制应用
现代浏览器真会跳过不匹配的 CSS 下载吗
Chrome 80+、Firefox 69+、Safari 14+ 确实支持惰性加载，但有个前提：媒体查询语法必须正确、且不能降级为 all。
常见失效情况：
-
media="screen and (max-width: 768px)"中多一个空格或括号没闭合 → 浏览器无法解析 → 当作media="all"处理 → 全部下载 -
media="(min-width: 769px) and (orientation: landscape)"在竖屏桌面访问时，整个文件不会出现在 Network 面板里 -
media="print"在普通浏览时通常不下载，但部分旧版 Safari 仍会预取（不可靠，别用于响应式主逻辑） - Android WebView（尤其旧版）和 IE11 及以下：全部加载，
media形同虚设
验证方法：打开 DevTools → Network → 刷新页面 → 看对应 CSS 的 Initiator 是否为 parser，状态码为 200，且仅在匹配条件下出现。
多个 link 标签并列写时的断点设计陷阱
用多个 link 分开加载 mobile.css、tablet.css、desktop.css 看似清晰，实际容易出错。
典型问题：
- 断点重叠或留白：比如
mobile.css用(max-width: 768px)，tablet.css用(min-width: 768px)→ 宽度正好 768px 时两个都匹配，都下载 - 推荐写法：
mobile.css→media="(max-width: 767px)"，tablet.css→media="(min-width: 768px) and (max-width: 1023px)"，desktop.css→media="(min-width: 1024px)" - 不要依赖
handheld：这个值早已被现代浏览器忽略，无实际效果 - 高 DPI 场景慎用
device-pixel-ratio：Safari 对它的支持不稳定，更推荐用min-resolution: 2dppx
什么时候该用 media 属性，什么时候不该用
它适合做「静态分发」，不适合做「动态响应」。
适用场景：
- 打印样式表：
<link rel="stylesheet" href="print.css" media="print">—— 稳定、语义明确、浏览器支持好 - 深色模式初始加载：
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">—— 用户首次访问即生效，无需 JS - 差异极大的布局方案（如移动端用 Flex，桌面端用 Grid + 多栏）—— 文件体积大、逻辑隔离强
不适用场景：
- 只是按钮颜色、字体大小微调 —— 合并进单个 CSS +
@media更轻量 - 需要横竖屏切换时重新加载 ——
media不监听 resize 或 orientationchange - 要兼容 IE 或低端 Android WebView —— 直接放弃，改用内联关键样式 + 单 CSS 文件
最常被忽略的一点：哪怕你写了完美的 media 查询，如果服务器没配好缓存头（比如 Cache-Control: no-cache），某些代理或 CDN 仍可能把“不匹配”的 CSS 缓存下来，下次在匹配设备上反而加载了旧版本。
