怎样用CSS媒体查询针对Retina高清屏加载高分辨率背景图-css教程-PHP中文网

@media (min-resolution: 2dppx) 不生效是因为旧版 iOS Safari（9–12）不识别该语法，仅支持 -webkit-min-device-pixel-ratio: 2；正确写法是用逗号分隔两个条件实现兼容。

怎样用css媒体查询针对retina高清屏加载高分辨率背景图

为什么只写 `@media (min-resolution: 2dppx)` 还是不生效

因为旧版 iOS Safari（iOS 9–12）根本不认识 min-resolution，直接跳过整条规则。它只认 -webkit-min-device-pixel-ratio，而且必须写成 2，不能写 2.0 或 2dppx。现代浏览器虽支持 2dppx，但单独用它等于放弃大量存量 iOS 设备。

正确写法是用逗号分隔两个独立条件，让浏览器“任选其一命中即可”：

div.icon {
  background-image: url("icon.png");
  background-size: 16px 16px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  div.icon {
    background-image: url("icon@2x.png");
    background-size: 16px 16px; /* 必须重写 */
  }
}

-webkit-min-device-pixel-ratio: 2 覆盖老 iOS 和部分 Android WebView
min-resolution: 2dppx 覆盖 Chrome、Firefox、Safari 14+、Edge
绝对不要写成 and 连接，否则逻辑变成“同时满足”，结果谁都不触发
所有高清图文件（如 icon@2x.png）必须真实存在且尺寸是 1x 图的 2 倍（32×32 对应 16×16）

`background-size` 不重写就会糊，不是 bug 是机制

CSS 不会自动按 DPR 缩放背景图。当你把 icon@2x.png（32×32 px）设为背景，而容器宽高是 16px，浏览器默认把它当 32 CSS 像素渲染——结果拉伸到填满 16px 容器，像素被插值模糊。

必须显式指定 background-size 为逻辑尺寸（即设计稿里的 CSS 像素值），才能让高倍图“精准覆盖”：

容器是 width: 20px; height: 20px; → background-size: 20px 20px;
如果是全屏 banner，且希望等比缩放不裁剪 → 用 background-size: contain;
如果允许裁剪、优先填满 → 用 background-size: cover;，但需确认构图安全区
千万别依赖继承：媒体查询块里必须完整写出 background-size，否则 fallback 到初始值

为什么 `image-set()` 在 Firefox 里背景直接消失

Firefox 至今（v128）完全不解析 image-set()，遇到就静默丢弃整条 background-image 声明——不是降级，是彻底忽略。所以单靠它等于没写。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

真要兼容，得用三行叠加 + 明确 fallback 顺序：

div.logo {
  background-image: url("logo.png"); /* 所有浏览器兜底 */
  background-image: -webkit-image-set(url("logo.png") 1x, url("logo@2x.png") 2x); /* 老 Safari */
  background-image: image-set(url("logo.png") 1x, url("logo@2x.png") 2x); /* 现代 Chrome/Safari */
  background-size: 100px 40px;
}

顺序不能错：url() 必须在最前，否则旧浏览器连 fallback 都看不到
1x 单位必须带 x，不能写成 1 或 1dppx
路径必须用 url("...") 包裹，引号统一（全单或全双）
Webpack/Vite 不处理 image-set() 里的路径，构建后若 logo@2x.png 不在 dist/ 下，高 DPR 屏就 404