Less无法响应DPR变化，因其为编译时预处理器；image-set()不支持Less变量插值；响应式背景图可用混合器按视口宽度切换；兼顾DPR与宽度需JS动态加class；background-image无懒加载能力，应结合picture/srcset或IntersectionObserver。
Less里不能直接响应DPR变化，别试图用@media模拟image-set()
Less 是编译时预处理器，它生成的 CSS 在运行时就固定了。你写个 @media (-webkit-min-device-pixel-ratio: 2)，编译后就是一条静态规则，浏览器不会因为用户切到高 DPR 屏幕就重新编译 Less。更关键的是：这种写法根本不是标准媒体查询，Chrome 会忽略，Firefox 直接不认。
真正能响应 DPR 的只有原生 image-set()，但它的语法不能被 Less 变量或混合器“参数化”——你没法写 .bg-dpr(@url1x, @url2x) { background-image: image-set(url(@url1x) 1x, url(@url2x) 2x); }，因为 Less 不支持在 image-set() 内部插值（会编译报错或输出无效 CSS）。
用混合器封装多断点背景图切换是可行的，但只适用于视口宽度，不解决DPR
如果你的目标是按屏幕宽度换图（比如 mobile/tablet/desktop），用 Less 混合器封装媒体查询是干净且实用的。它能减少重复代码，也方便统一维护路径前缀或尺寸逻辑。
- 定义混合器时，把断点值、图片路径前缀、默认
background-size都设为参数，例如：.bg-responsive(@mobile-url, @tablet-url, @desktop-url, @size: cover) { background-image: url(@mobile-url); background-size: @size; @media (min-width: 768px) { background-image: url(@tablet-url); } @media (min-width: 1200px) { background-image: url(@desktop-url); } } - 调用时传入相对路径，避免空格和中文：
.hero { .bg-responsive("./img/bg-m.jpg", "./img/bg-t.jpg", "./img/bg-d.jpg"); } - 务必按从小到大顺序书写媒体查询，否则
@media (min-width: 1200px)写在前面，会覆盖掉后面更窄的规则 - 所有断点必须显式声明
background-size和background-position，否则小图在桌面端可能拉伸、偏移
想兼顾DPR和视口宽度？放弃纯CSS方案，用JS动态加class
当设计要求「iPhone竖屏加载@2x竖构图、MacBook横屏加载@1x横构图」这种组合策略时，image-set() 只管 DPR，媒体查询只管宽度，两者无法嵌套或联动。此时 CSS 层面没有优雅解。
立即学习“前端免费学习笔记（深入）”；
更可控的做法是用 JS 判断 window.innerWidth 和 window.devicePixelRatio，动态给根元素或容器加 class：
- 例如生成
class="dpr-2 width-375"或class="dpr-1 width-1440" - Less 里提前写好对应规则：
.dpr-2.width-375 { background-image: url("./img/hero-iphone@2x.jpg"); } - 注意监听
resize和orientationchange，iOS Safari 横竖屏切换时innerWidth会变，但不会触发 DPR 变化 - 首次渲染建议用
DOMContentLoaded+setTimeout(fn, 0)确保获取到真实视口尺寸
真正按需加载背景图的底线：别依赖background-image做条件加载
CSS 的 background-image 天然不具备“懒加载”能力。即使你用媒体查询覆盖了某张图，浏览器仍可能预加载所有声明过的 URL（尤其在 Chrome 中）。如果某张背景图体积超过 500KB，又只在桌面端用，移动端用户就白白浪费了流量。
这时候该考虑降级方案：
- 把关键背景图改用
<picture></picture>+srcset+sizes，语义清晰、浏览器原生支持按需下载 - 非关键背景图（如装饰性纹理）用 JS 控制：先不设
background-image，等元素进入视口（IntersectionObserver）再设置el.style.backgroundImage - 所有图片 URL 加上版本哈希或时间戳参数，避免缓存导致换图失败，例如
banner-v2.3.jpg?t=1713299160
复杂点在于：你得同时管理 DPR 判断、视口断点、加载时机、缓存失效这四件事。纯 CSS 做不到，别硬撑。
