link的media属性不能实现响应式加载，仅在页面首次解析时判断一次，不随窗口缩放或横竖屏切换重新下载；Chrome/Edge会预加载所有stylesheet，Safari/Firefox更严格遵循规范，真正可靠场景包括print、prefers-color-scheme、orientation: landscape等稳定条件。

link 的 media 属性本身**不能实现响应式加载**——它只在页面首次解析时判断一次，不随窗口缩放、横竖屏切换或系统主题变化重新下载或卸载 CSS。

为什么写 media="(max-width: 768px)" 后小屏还是加载了 desktop.css？

常见错误是误信“浏览器会智能跳过不匹配的请求”。实际行为因引擎而异：

• Chrome/Edge（Chromium 内核）在 HTML 解析阶段会**预加载所有 <link rel="stylesheet">**，哪怕 media 不匹配，Network 面板里仍能看到请求（只是不参与渲染）
• Safari 和 Firefox 表现更接近规范：不匹配时确实不发起请求——但前提是 media 值语法合法、无空格、括号完整
• 写成 media="screen and (max-width: 768px)" 比 media="(max-width: 768px)" 更稳妥，避免某些旧版解析器退化为 all
• media="not screen" 或 media="handheld" 这类废弃值，现代浏览器大多忽略或当作 all 处理，不可靠

media 真正靠谱的使用场景有哪些？

它适合那些「条件稳定、无需动态切换、资源完全隔离」的加载需求：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• print：打印时才下载 print.css，且该文件不会影响屏幕样式 —— 这是最成熟、兼容性最好的用法
• prefers-color-scheme：系统暗色模式开启时自动加载 dark.css；切换主题时浏览器会主动 fetch 并应用（前提是 DOM 中已存在该 <link>）
• orientation: landscape：仅横屏设备拉取横屏专属布局，竖屏设备完全不请求（注意：旋转瞬间可能短暂共存，不要依赖它做样式隔离）
• min-resolution: 192dpi 或 -webkit-min-device-pixel-ratio: 2：只给 Retina 屏加载高清图标字体，普通屏跳过

想让手机真不下载 desktop.css，必须绕开静态 <link>

纯 HTML + media 无法保证 100% 按需下载。要彻底规避非目标 CSS 的请求，得用 JS 动态控制：

立即学习“前端免费学习笔记（深入）”；

• 初始 HTML 中不写任何带断点的 <link>，只留基础样式（如 base.css）
• 用 window.matchMedia() 检测当前条件，例如 matchMedia("(max-width: 767px)").matches
• 匹配成功后，再 document.head.appendChild(动态创建的 <link>)
• 若需响应 resize，监听 change 事件并切换 disabled 属性（注意：disabled 只禁用生效，不卸载已加载的 CSS）
• 构建工具（如 Webpack）中要确认 html-webpack-plugin 或压缩插件没删掉 media 属性

真正容易被忽略的是：即使你写了完美的 media，如果 <meta name="viewport"> 缺失或 width 设错，视口宽度计算就会全盘失效——所有断点都失去意义。