media属性实现“按条件下载”而非“按需加载”，即仅当媒体查询匹配时才发起HTTP请求，不匹配则完全不fetch；其行为由<link>标签的media属性控制，非CSS中的@media规则。
media属性不是“按需加载”，而是“按条件下载”
很多人误以为写 @media (max-width: 768px) 就能只让手机下载 mobile.css，其实不然——@media 规则本身不控制网络请求，它只是 CSS 文件加载后才起作用的“开关”。真正决定“是否发起 HTTP 请求”的，是 <link> 标签上的 media 属性。
浏览器看到 <link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">，会先解析媒体查询，匹配当前视口宽度；仅当结果为 true 时，才发起对 mobile.css 的请求。不匹配，就完全不 fetch，连 404 都不会出现。
- 这个行为是 HTML 原生能力，不需要 JS，兼容 IE10+
- 但 IE9 及以下会忽略
media，无条件加载所有<link>，如需支持得降级用 JS 判断 + 动态插入 - 多个
media值之间必须逻辑互斥，否则可能同时触发多个请求（比如漏写and (orientation: portrait)，横屏手机也会加载mobile.css）
用 screen and (min-width) 组合代替 handheld 等过时值
handheld、tv 这类设备类型值早已被现代浏览器弃用，实际检测不可靠。真实项目中应统一使用 screen + 媒体特性组合，例如：
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)"> <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 768px)">
注意：screen 是媒体类型，(max-width: 767px) 是媒体特性，两者用 and 连接才合法；单独写 media="(max-width: 767px)" 在部分旧版 Safari 中可能被忽略。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 视口宽度基于
viewportmeta 设置，不是设备像素比（DPR），所以不要用device-width - 避免嵌套过多
@media在单个 CSS 文件里——解析开销在低端 Android WebView 中明显，建议拆成独立文件 +media控制下载 - 如果用了构建工具（如 Webpack/Vite），确保
mobile.css路径正确，否则静默失败，控制台无报错
print 媒体类型是异步加载 CSS 的最稳方案
想让 CSS 不阻塞渲染又不用 JS？media="print" 是目前最轻量、兼容性最好的选择。原理很简单：浏览器只对 media="all" 或匹配当前环境的类型（如 screen）强制同步解析；print 是合法且真实存在的类型，但当前不匹配，所以下载被降级为低优先级，不卡 HTML 解析。
关键在 onload 回调里必须做两件事：this.media = 'all' 让样式生效，this.onload = null 防止重复触发。漏掉后者，在缓存复用或动态重插时会出问题。
- 别用
media="none"——旧版 Firefox/IE 不触发onload，稳定性差 - 如果页面本身有
@media print规则，这个 trick 完全不影响它们，二者互不干扰 - 动态插入的
<link>（比如 DOMContentLoaded 后 JS 创建）不支持内联onload，得手动link.addEventListener('load', ...)
SSR 页面里慎用 media 切换，FOUC 风险仍在
服务端渲染（SSR）场景下，首屏内容若依赖 mobile.css 里的样式，而该文件又靠 media="(max-width: 767px)" 控制下载，用户在小屏设备上仍可能看到短暂的无样式内容（FOUC），因为 CSS 下载和解析发生在 HTML 渲染之后。
- 真正首屏关键样式，必须保留在同步
<link rel="stylesheet">中（即media="all"或不设media） -
media切换只是卸下阻塞，不是消除依赖——它不改变样式层叠顺序，也不保证执行时机 - 构建产物带 hash 的路径（如
mobile.a1b2c3.css）无法直接写死在 HTML 里，需配合构建插件生成带media的<link>标签
多端节能的核心不在“怎么写 media”，而在清楚每条 <link> 是否真被需要、是否真被下载、是否真影响首屏。细节一漏，省下的流量可能全被 FOUC 或重复请求吃掉。
