用link的media属性加载不同CSS文件最直接，但必须写全“screen and (max-width: 768px)”格式，漏媒体类型或括号不闭合会导致旧版Safari跳过请求；不匹配时完全不发起HTTP请求。
用 link 的 media 属性加载不同 CSS 文件最直接
浏览器原生支持，不依赖 JS，且不匹配时根本不会发 HTTP 请求——不是“加载后不生效”，是彻底跳过。关键在语法必须写全：screen and (max-width: 768px)，漏掉 screen and 或括号不闭合，旧版 Safari 就会忽略整条 link。
-
media="max-width: 768px"❌ 浏览器当无效值处理，Network 面板里压根看不到请求 -
media="(min-width: 480px) and (max-width: 1024px)"❌ 同样无效，缺媒体类型前缀 -
media="screen and (min-width: 480px) and (max-width: 1024px)"✅ 平板区间精准匹配 - 多个条件“或”关系用英文逗号分隔：
media="screen and (min-width: 1024px), screen and (min-resolution: 2dppx)"
断点值反映的是视口宽度（document.documentElement.clientWidth），不是设备物理分辨率；缩放、横竖屏、<meta name="viewport"> 设置都会影响匹配结果。别只靠浏览器窗口缩放测试，得用设备模拟器或真机验证。
什么时候该拆成多个 CSS 文件，而不是只用 @media
拆文件只有在某套样式在另一类设备上「完全不需要」且体积显著（比如 >30KB）时才有意义。否则多一次 HTTP 请求反而拖慢首屏，尤其对弱网或低端设备。
- 适合拆：纯移动端组件库（
mobile-components.css）、打印专用样式（print.css）、高 DPR 图标替换（retina-icons.css） - 不适合拆：按钮内边距、字体大小微调这类仅几行差异的规则
- IE9+ 支持
media属性，但不支持窗口缩放时动态切换已加载的link—— 缩放后不会补加载新文件
用 JS 动态插入 link 适配 DPR 时要注意什么
window.devicePixelRatio 比媒体查询更可靠，尤其安卓 WebView 对 -webkit-device-pixel-ratio 支持不稳定。但 JS 插入必须尽早执行，否则可能闪动或样式错乱。
立即学习“前端免费学习笔记（深入）”；
- 取整拼文件名：
base-dpr${Math.round(window.devicePixelRatio || 1)}.css，避免小数路径错误 - 必须放在
最顶部的内联<script></script>里，不能 defer 或异步 - 不要用
fetch+innerHTML注入样式 —— 破坏 CSSOM，且无法被预加载器识别 - 若项目已用
lib-flexible，需注释掉其docEl.style.fontSize = ...行，否则与 DPR CSS 中的font-size冲突
为什么不能靠 @media 查询触发新 CSS 加载
@media 只控制「已加载」CSS 内部规则是否启用，它不是资源调度机制。即使你写了 @media (-webkit-min-device-pixel-ratio: 2) { ... }，浏览器也不会因此去拉取新文件。
- 所有带媒体查询的规则都会随主 CSS 一起下载、解析，冗余样式白占带宽和内存
- 某些安卓低端机上
lib-flexible会把dpr错判为 1，JS 方案可兜底：const dpr = Math.min(3, Math.round(window.devicePixelRatio || 1)) - DPR 是设备固有属性，但它的实际影响只在像素级细节（1px 边框、图标清晰度、文字锐度），别用它去重设全局
font-size或布局容器
真正容易被忽略的是：断点值本身依赖视口计算逻辑，而视口受 <meta name="viewport"> 控制；没这个 meta 标签，max-width: 768px 在 iOS 上可能永远不匹配。
