link标签的media属性仅控制CSS文件是否下载，不响应窗口变化；响应式布局必须依赖CSS内部的@media规则实现。
link 标签的 media 属性不能单独实现响应式布局，它只控制 CSS 文件是否下载，不响应窗口变化、不管理样式生效逻辑——真要做响应式，必须靠 CSS 内部的 @media 规则。
link 的 media 属性只决定“下不下载”，不是“用不用”
浏览器解析 HTML 时，会检查 <link rel="stylesheet" media="(max-width: 768px)" href="mobile.css"> 中的 media 值是否匹配当前环境。匹配才发 HTTP 请求；不匹配，Network 面板里根本看不到这个文件（不是下载后丢弃，是压根不发请求）。
- 常见错误：把
media="(min-width: 769px), (orientation: landscape)"写成带逗号的“或”逻辑 → 浏览器无法解析 → 退化为media="all"→ 全部加载 -
media只在初始 HTML 解析阶段判断一次，横竖屏切换、缩放、拖拽窗口宽度，它不会重新触发下载或卸载 - 如果
mobile.css里写的是.header { color: red }（没套@media），那只要初始匹配了media条件，样式就生效，且一直保留——哪怕你把窗口拉宽到 1920px
为什么不能靠多个 link + media 拆文件做响应式
看似合理：<link media="(max-width: 480px)" href="phone.css"> + <link media="(min-width: 481px) and (max-width: 768px)" href="tablet.css">，但实际踩坑密集：
- Android WebView（尤其旧版）和 IE11 及以下：无视
media，全部下载 - Chrome 80+/Firefox 69+/Safari 14+ 虽支持惰性加载，但要求语法零容错——
screen and (min-width: 768px)多个空格或括号不闭合，就失效 - 样式层叠失控：两个 CSS 文件都定义了
.btn，用户从桌面切到手机，desktop.css的规则仍保留在样式表中，可能覆盖phone.css的意图 -
rel必须是"stylesheet"才生效；写成rel="preload"或rel="prefetch"，media属性直接被忽略
真正该怎么做：单 CSS 文件 + @media + 正确 <meta name="viewport">
现代响应式实践的核心是把所有断点逻辑收进一个主 CSS 文件，用 @media 包裹不同尺寸的规则。HTML 里只留一个干净的 <link rel="stylesheet" href="main.css">。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是前提，否则移动端会以桌面视口渲染，@media (max-width: 768px)失效 - 避免用
device-width：iOS Safari 横屏时报告的值不可靠，优先用width（视口宽度） - 想节省带宽？可以配合
media加载极简“关键 CSS”，但主体响应逻辑必须在 CSS 内部完成，比如：<link rel="stylesheet" media="print" href="print.css">仅用于打印场景，不参与屏幕响应 - 深色模式、减少动画等运行时偏好，只能靠
@media (prefers-color-scheme: dark)这类 CSS 内部媒体查询，link的media完全不监听这些变化
最易被忽略的一点：当你在 DevTools 里反复调整窗口宽度却看不到样式变化，别急着改 link 的 media 值——先确认 CSS 文件里有没有对应尺寸的 @media 块，以及 viewport meta 标签是否写对。因为 link 的 media 早就不动了，真正干活的是 CSS 里的那些 @media。
