浏览器解析html时已锁定css加载逻辑，media属性不支持calc()、css变量或js动态值，所有含此类表达式的link都会退化为media="all"，导致“按需”失效；唯一可靠方式是js获取window.devicepixelratio后动态创建link标签插入head。
不能靠 media 属性动态计算 CSS 路径，浏览器解析 HTML 时就锁死了加载逻辑，所有含 calc()、var(--dpr) 或 JS 注入值的 media 都会退化为 all，导致“按需”失效。
为什么 link[media] 不支持动态值
浏览器在 HTML 解析阶段就决定是否发起 CSS 请求，此时 calc() 还没执行，CSS 变量还没赋值，JS 更没运行。所以像 media="(max-width: calc(100vw - 1px))" 或 media="(min-resolution: var(--dpr))" 这类写法，实际等价于 media="all"，所有文件都会被下载——你写的“条件”根本没起作用。
常见误判场景：
- 以为
@media (-webkit-min-device-pixel-ratio: 2)能触发新 CSS 加载，其实它只控制已加载样式中规则的启用与否 - 把
device-width当作可靠断点，但安卓 WebView 返回值常为0或undefined，而window.devicePixelRatio是真实可读的 - 用
@import或内联@media块，结果所有 CSS 全部下载并解析，白占带宽和 CPU
真正能动态引入的只有 JS 方式
用 window.devicePixelRatio 获取真实设备能力，四舍五入取整后拼路径，再通过 document.createElement('link') 插入 顶部，这是唯一可控、可靠、不依赖构建流程的方法。
关键实操点：
- 取整逻辑建议写成
const dpr = Math.min(3, Math.round(window.devicePixelRatio || 1))，兜底防异常值 - 文件名统一用
base-dpr1.css、base-dpr2.css、base-dpr3.css，避免小数（如dpr2.5）导致 404 - 脚本必须放在
最顶部的内联<script></script>中，否则样式闪动或错乱 - 禁止用
fetch+innerHTML注入样式 —— 会破坏 CSSOM，且无法被预加载器识别
如果已用 lib-flexible，要特别注意冲突
它会动态设置 data-dpr 和 html.style.fontSize，若你再手动加载 DPR CSS，容易重复干预字体、边框等基础尺寸。
稳妥做法：
- 停用
lib-flexible的fontSize动态逻辑（注释掉docEl.style.fontSize = ...那行），只保留data-dpr属性，这样你仍可用[data-dpr="2"]做精细化控制 - 若必须保留缩放逻辑（比如解决 1px 边框），DPR CSS 应专注处理图片、图标、阴影等不受缩放影响的属性，避开
font-size和border - 某些低端安卓机上
lib-flexible会把dpr错判为1，JS 加载时加兜底比仅靠它更稳
最易被忽略的一点：DPR 是设备固有属性，但它对样式的实际影响只在像素级细节（1px、图标清晰度、文字锐度），不是所有样式都需要按 DPR 拆分；盲目拆分反而增加维护成本和加载不确定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
