link media 属性控制浏览器是否发起 http 请求，匹配时才 fetch 资源，不匹配则 network 面板无记录；它不是样式开关而是资源加载闸门，@media 规则仅影响渲染层。
link media 属性到底控制“下载”还是“应用”
它控制的是浏览器是否发起 HTTP 请求——不匹配时，mobile.css 根本不会出现在 Network 面板里；匹配时才真正 fetch。这不是样式开关，而是资源加载闸门。@media 规则做不到这点，它只管渲染层，文件照下不误。
常见错误现象：Failed to load resource 却查不到请求记录；写了 media="(max-width: 768px)"，但桌面端 DevTools 里仍看到该 CSS 被加载——说明 media 值写错了（比如漏括号、拼错关键字），浏览器退化为 media="all"。
-
media="screen and (max-width: 768px)"和media="(max-width: 768px)"效果一致，但前者语义更清晰 - 无效值如
media="mobile"或media="handheld"（已废弃）会被当作all处理，不可靠，必须避免 -
print在 Chrome/Edge 的“另存为 PDF”中触发，Safari 行为不稳定，慎用于关键打印逻辑
多个 link + media 如何避免重复下载或漏加载
断点必须互斥且覆盖完整视口范围，否则某些宽度下可能一个都不匹配，或两个同时命中。比如 max-width: 768px 和 min-width: 768px 在 768px 视口下会共存，导致两份 CSS 都被拉下来。
正确写法示例：
<link rel="stylesheet" href="base.css"><link rel="stylesheet" href="mobile.css" media="(max-width: 767px)"><link rel="stylesheet" href="desktop.css" media="(min-width: 768px)">
- 边界用
767px和768px切开，不留缝隙也不重叠 - 路径必须准确：
href="css/mobile.css"对应真实文件位置，写错只会静默 404，无报错提示 - IE9 及以下完全忽略
media，所有 CSS 都加载——若需兼容，得用 JS 检测后动态插入
为什么改 link.media 不会自动重载样式
浏览器只在 <link> 插入 DOM 时检查一次 media 值，后续 JS 修改 link.media 不会触发重新 fetch 或解析。直接赋值等于白改。
正确做法是手动替换节点：
const link = document.querySelector('link[data-id="theme"]');
link.media = '(min-width: 1024px)';
link.remove();
document.head.appendChild(link);
- 不要只改
media，必须移除再插入，否则新样式不生效 - 用
link.disabled = true/false配合media切换也可行，但在 Safari 中偶有缓存残留，不如节点重插可靠 - 避免先改
href再改media：href 变更会触发新请求，但 media 不匹配时请求又被取消，造成冗余
什么时候不该用 link media，而该用单 CSS + @media
当页面需要频繁响应窗口缩放、或团队维护多套 CSS 成本过高、或移动端用户仍需复用部分桌面样式时，<link media> 反而增加出错概率和调试难度。
此时更稳的做法是：
- 把所有规则合并进一个
main.css，用@media包裹不同断点 - 确保
<meta name="viewport">正确设置，否则max-width基于的视口宽度会失真 - 对真正大体积资源（如主题字体、暗色模式整套变量），再配合 JS 动态加载
<link>，而非全量拆分
最易被忽略的一点：media 查询基于当前视口 CSS 像素宽度，不是设备类型，也不是 UA 字符串——横屏 iPad 宽度 > 768px，照样走 desktop.css，别指望它“认手机”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
