link的media属性仅控制CSS文件的加载时机，不决定样式生效条件；真正控制样式生效的是CSS内部的@media规则，二者逻辑独立，不可混用。
link标签的media属性只控制加载时机，不控制样式生效条件
很多人以为给 <link> 加上 media="screen and (max-width: 768px)" 就能让样式只在小屏生效——其实不是。它只是告诉浏览器“这个CSS文件只在匹配时下载并解析”，一旦加载进来，里面所有规则（包括没加媒体查询的）都会参与层叠计算。
真正决定某条CSS是否生效的，是写在CSS内部的 @media 规则，不是HTML里的 media 属性。
- ✅ 正确做法：用
<link media="print">加载打印专用样式表，里面可以全是普通规则，无需再套@media print - ❌ 常见错误：写
<link media="(min-width: 768px)">却在对应CSS里写桌面通用样式，结果平板横屏时加载了、但手机竖屏时根本没加载，导致布局断裂 - ⚠️ 兼容性注意：
media属性在IE8及以下被忽略，所有CSS都会加载；现代浏览器支持良好，但Safari对动态修改media值的响应有延迟
@media规则必须写在CSS文件内部才可控
想让某组样式只在特定视口生效，唯一可靠的方式是在CSS里用 @media 包裹。它和HTML中link的media是两套逻辑，别混用。
比如你想让导航栏在小屏折叠，就得这样写：
立即学习“前端免费学习笔记（深入）”；
nav { display: flex; }
@media (max-width: 768px) {
nav { display: none; }
}
而不是指望靠外部加载来切换整张样式表。
- ? 使用场景：适配移动端、暗色模式切换（
@media (prefers-color-scheme: dark)）、打印优化 - ⚙️ 参数差异：
@media screen和@media all在大多数情况等效，但screen明确排除打印设备，避免意外渲染 - ⚡ 性能提示：把高频变化的媒体查询（如
hover）放在文件末尾，减少重排阻塞；避免嵌套多层@media，CSS解析器不会跳过未匹配的块，仍要遍历
动态切换media属性容易掉进“加载不触发重绘”陷阱
用JS改 link.media 只会触发资源加载或卸载，不会让已加载的样式重新计算。比如你把 media 从 "(max-width: 480px)" 改成 "(min-width: 481px)"，旧CSS还在内存里，新CSS可能还没下载完，页面就处于无样式状态。
- ❌ 错误示例：
document.querySelector('link').media = '(min-width: 768px)'—— 不会立即应用新规则 - ✅ 替代方案：用
matchMedia()监听变化，然后切换class或插入<style></style>标签，更可控 - ? 调试技巧：Chrome DevTools 的 “Rendering” 面板里勾选 “Emulate CSS media type”，可快速验证
@media是否命中，比反复改link.media靠谱得多
不要为每个断点建独立CSS文件
拆成 mobile.css、tablet.css、desktop.css 看似清晰，实际增加HTTP请求数、缓存碎片化，且无法利用CSS层叠优势。现代项目基本都用单文件+@media组织。
- ✅ 推荐结构：基础样式 →
@media (min-width: 768px)→@media (min-width: 1024px)，按移动优先顺序写 - ? 例外情况：只有当某套样式体积超200KB、且几乎永不复用（如PDF导出专用样式），才考虑分离
- ? 小技巧：用PostCSS插件
postcss-preset-env可提前写@media (width >= 768px)这类语法，自动转成兼容格式
