最稳妥的写法是@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)，需同时覆盖ios safari、旧版firefox及现代浏览器，且必须配合显式background-size设置，否则高清图会拉伸失真。
Retina背景图的@media查询怎么写才可靠？
Less里写Retina适配，核心是用@media匹配device-pixel-ratio，但直接写2容易漏掉iOS Safari的-webkit-min-device-pixel-ratio和Firefox旧版的min-resolution。主流做法是合并三套规则，否则在iPhone 14或某些Android平板上可能不生效。
-
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)是目前最稳妥的写法 - 不要只写
@media (min-resolution: 2dppx)，IE11和部分安卓WebView不识别dppx单位 -
192dpi对应2x（因为72dpi × 2.666… ≈ 192dpi），不是144dpi——这是常见误解
.icon-home {
background-image: url("icon-home.png");
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
background-image: url("icon-home@2x.png");
background-size: 16px 16px; // 必须显式设回原始尺寸
}
}
用Less变量封装Retina规则，避免重复写@media？
手动复制粘贴@media块容易出错，尤其项目里几十个图标时。推荐抽成参数化mixin，把基础图路径、高清图路径、尺寸都作为参数传入。
- mixin里必须包含
background-size逻辑，否则@2x图会拉伸变形 - 尺寸参数建议用
@size而非@width @height，多数图标是正方形，减少调用时输入 - 如果图本身是SVG，其实不需要@2x，但mixin里仍要兼容
.png和.jpg后缀
.retina-bg(@url, @retina-url, @size) {
background-image: url(@url);
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
background-image: url(@retina-url);
background-size: @size;
}
}
<p>.header-logo {
.retina-bg("logo.png", "logo@2x.png", 120px 40px);
}</p>
background-size设错会导致哪些视觉异常？
background-size没设或设错是最隐蔽的问题：图加载了，但看起来模糊、偏移、被裁切，开发者常以为是图片本身质量差。
- 原图
200×100px，@2x图400×200px，必须设background-size: 200px 100px，不能省略 - 用
cover或contain会破坏像素对齐，Retina下边缘常出现半像素模糊 - 如果容器宽高是百分比或
auto，background-size必须用具体数值，否则浏览器无法按物理像素缩放
另外，background-repeat: no-repeat最好显式声明，某些老版本Safari在Retina下repeat行为不稳定。
Webpack或Vite环境下，如何让Less自动替换@2x路径？
Less本身不处理文件存在性校验，所以url("icon@2x.png")写错路径时，编译不报错，但浏览器控制台会404。构建工具能提前发现这类问题。
- Webpack +
less-loader配合resolve.alias可统一映射@2x前缀，但需额外配置url()解析逻辑 - 更简单的是用PostCSS插件
postcss-retina-bg，它能在CSS生成阶段自动补全@2x规则，和Less编译解耦 - Vite用户注意：
vite-plugin-less默认不启用math: always，如果Less里用了计算表达式（比如@size / 2），需手动开启
实际项目里，高频改动的图标建议保留手动写@2x路径——自动替换容易掩盖命名不一致问题，比如btn-close.png配了btn_close@2x.png（下划线差异）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
