retina适配本质是用2x/3x高倍图替换1x图但保持css像素尺寸不变；需通过媒体查询匹配device-pixel-ratio切换资源，less mixin可封装该逻辑，但须注意浏览器前缀兼容、字符串插值语法及资源维护成本。
什么是Retina适配的本质问题
Retina 屏幕（或高 DPI 设备）的 CSS 适配，核心不是“让图片更清晰”，而是“在物理像素密度更高的设备上，用 2x（或 3x）尺寸的图片，但保持相同的 CSS 像素尺寸”。浏览器默认按 CSS 像素渲染，所以 background-image 或 content 引用的图片若仍是 1x 尺寸，就会模糊。关键在于：**用媒体查询匹配 device-pixel-ratio，切换为高倍图资源，同时保持元素宽高不变**。
Less Mixin 如何封装 @media(-webkit-min-device-pixel-ratio: 2)
原生 CSS 写法冗长且重复，Less 的 Mixin 能把逻辑收口。注意：不同浏览器前缀必须分开写，@media (-webkit-min-device-pixel-ratio: 2) 和 @media (min-resolution: 192dpi) 不等价，也不能只写一个。
.retina-bg(@url, @width: auto, @height: auto) {
background-image: url(@url);
background-size: @width @height;
<p>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url(~"@{url}@2x.png");
}
}</p>
-
@url 必须是字符串（如 "./icon.png"），不能带引号传入 Mixin（Less 会报错）
-
~"@{url}@2x.png" 中的 ~ 是 Less 字符串插值必需的，否则生成的是字面量 "@{url}@2x.png"
-
min-resolution: 192dpi 对应 2x（因为 96dpi × 2 = 192dpi），3x 应该用 288dpi，但实际中多数只覆盖 2x
为什么不能只靠 background-size: contain / cover 自动适配background-size: contain 或 cover 只控制缩放行为，不解决资源本身分辨率不足的问题。如果原始图片是 20×20px 的 1x PNG，在 Retina 屏上拉伸到 40×40 物理像素，仍会模糊——因为位图没有额外像素信息可补。必须提供真实高倍图，并用媒体查询精准替换。
- 高倍图命名需统一规范（如
icon.png + icon@2x.png），否则 Mixin 无法推导
- 若使用雪碧图（sprite），不能简单加
@2x，得重切一版两倍尺寸的图，并同步调整 background-position 和 background-size，这时 Mixin 需要扩展参数支持偏移量
- WebP / AVIF 等现代格式暂不被所有旧版 Safari 支持，
@2x 后缀仍建议保留 PNG fallback
实际调用时容易漏掉的两个细节
- Mixin 必须定义在引用它的样式规则**之前**，否则 Less 编译报 undefined mixin
- 如果项目用了 CSS Modules 或构建工具（如 webpack + less-loader），确保 lessOptions.javascriptEnabled = true（某些旧版本需要），否则 ~"..." 插值会失效
.logo {
width: 120px;
height: 40px;
.retina-bg("./logo.png", 120px, 40px);
}
@media (-webkit-min-device-pixel-ratio: 2) 和 @media (min-resolution: 192dpi) 不等价，也不能只写一个。
.retina-bg(@url, @width: auto, @height: auto) {
background-image: url(@url);
background-size: @width @height;
<p>@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url(~"@{url}@2x.png");
}
}</p>
-
@url必须是字符串（如"./icon.png"），不能带引号传入 Mixin（Less 会报错） -
~"@{url}@2x.png"中的~是 Less 字符串插值必需的，否则生成的是字面量"@{url}@2x.png" -
min-resolution: 192dpi对应 2x（因为 96dpi × 2 = 192dpi），3x 应该用288dpi，但实际中多数只覆盖 2x
为什么不能只靠 background-size: contain / cover 自动适配background-size: contain 或 cover 只控制缩放行为，不解决资源本身分辨率不足的问题。如果原始图片是 20×20px 的 1x PNG，在 Retina 屏上拉伸到 40×40 物理像素，仍会模糊——因为位图没有额外像素信息可补。必须提供真实高倍图，并用媒体查询精准替换。
- 高倍图命名需统一规范（如
icon.png + icon@2x.png），否则 Mixin 无法推导
- 若使用雪碧图（sprite），不能简单加
@2x，得重切一版两倍尺寸的图，并同步调整 background-position 和 background-size，这时 Mixin 需要扩展参数支持偏移量
- WebP / AVIF 等现代格式暂不被所有旧版 Safari 支持，
@2x 后缀仍建议保留 PNG fallback
实际调用时容易漏掉的两个细节
- Mixin 必须定义在引用它的样式规则**之前**，否则 Less 编译报 undefined mixin
- 如果项目用了 CSS Modules 或构建工具（如 webpack + less-loader），确保 lessOptions.javascriptEnabled = true（某些旧版本需要），否则 ~"..." 插值会失效
.logo {
width: 120px;
height: 40px;
.retina-bg("./logo.png", 120px, 40px);
}
icon.png + icon@2x.png），否则 Mixin 无法推导@2x，得重切一版两倍尺寸的图，并同步调整 background-position 和 background-size，这时 Mixin 需要扩展参数支持偏移量@2x 后缀仍建议保留 PNG fallbackundefined mixin
- 如果项目用了 CSS Modules 或构建工具（如 webpack + less-loader），确保 lessOptions.javascriptEnabled = true（某些旧版本需要），否则 ~"..." 插值会失效
.logo {
width: 120px;
height: 40px;
.retina-bg("./logo.png", 120px, 40px);
}
真正麻烦的不是写这个 Mixin，而是维护两套图片资源、确保构建流程不把 @2x 文件漏掉、以及在 CI 中校验 DPR 媒体查询是否被正确注入。这些比语法本身更耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
