是浏览器原生按需加载css的最简方式，解析html时即判断media条件并只请求匹配资源；需确保条件互斥、断点对齐逻辑像素、避免@import和内联@media，且构建时保持独立。
用 <link media> 让浏览器自己决定下载哪个 CSS
媒体查询本身不能“加载”文件，但 <link> 标签的 media 属性可以——浏览器在解析 HTML 阶段就判断是否匹配，只对匹配的 href 发起网络请求。这是真正按需加载的最简方式。
- 写法必须是
<link rel="stylesheet" href="mobile.css" media="(max-width: 767px)">，不是把@media塞进 CSS 里 - 多个
<link>的media条件要互斥，否则 iPhone 横屏时可能同时触发(max-width: 767px)和(orientation: landscape)，导致两个文件都下载 - 别写
media="screen and (min-device-pixel-ratio: 2)"—— 安卓 WebView 返回值不可靠，window.devicePixelRatio才是真实值，DPR 相关逻辑交给 JS 动态处理更稳 - 路径错误不会报错，只会静默失败；建议用相对根路径（如
/css/mobile.css）避免构建后路径漂移
max-width 断点怎么选才不踩坑
断点不是拍脑袋定的，得对齐设备逻辑像素宽度，而不是物理像素或设计稿尺寸。比如 iPhone 13 Pro 物理宽 1170px、DPR=3，逻辑宽就是 390px，但实际用 414px 更稳妥——因为 Safari 视口会预留状态栏空间。
- 优先用
max-width，别碰max-height：地址栏收起/展开会让window.innerHeight突变，@media (max-height: 667px)在滚动时可能反复开关 - 推荐三档断点：
(max-width: 320px)（老旧小屏）、(min-width: 321px) and (max-width: 375px)（主流 iPhone）、(min-width: 376px)（大屏手机/折叠屏半开） - 别写
media="(max-width: 768px)"通吃所有手机——iPad mini 也满足这个条件，结果按钮被缩成针尖大小 - 平板及以上设备建议用
min-width: 1024px而非768px，避免把小屏安卓平板误判为桌面端
为什么不用 @import 或内联 @media 块？
@import 是阻塞式加载，浏览器必须等外层 CSS 下载解析完，才能发起下一层请求；而内联 @media 会导致所有样式（包括不匹配的）都被下载和解析，浪费带宽和 CPU。
-
@import url("mobile.css")在移动端可能让首屏白屏多等 800ms+，尤其弱网下 - 把所有 DPR/尺寸规则塞进一个
main.css，哪怕用户是 DPR=1 的低端机，也要下载整份含@media (-webkit-min-device-pixel-ratio: 3)的文件 - 如果要用暗色模式适配，
<link href="dark.css" media="prefers-color-scheme: dark">比在主 CSS 里写@media (prefers-color-scheme: dark)更轻量 - 构建工具（如 Webpack）若未配置提取 CSS，
<link media>可能被合并进主包，失去按需优势——确认输出产物中这些<link>保持独立
JS 动态加载 CSS 时最容易漏掉的细节
用 JS 创建 <link> 并插入 document.head 很常见，但样式生效时机和错误捕获容易被忽略。
-
link.onload在 Firefox 和旧 Safari 中不触发，别依赖它判断加载完成 - 正确做法是轮询
link.sheet.cssRules或监听document.styleSheets长度变化，但要注意 CSP 策略可能禁用sheet.cssRules - 动态插入的 CSS 没有
media属性，浏览器会无条件下载——想实现条件加载，仍得提前用 JS 判断window.innerWidth或matchMedia结果 - 首次渲染前插入太晚（比如在
DOMContentLoaded后），可能导致页面闪动；建议在内尽早执行，或用rel="preload"提前提示浏览器
<link media> 是最值得优先尝试的方案——它不依赖 JS、兼容性好、浏览器原生支持预加载判断。但断点设计和条件互斥性必须人工核对，光靠“写了 media”不等于真省了流量。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
