用于移动和视网膜显示器上的高分辨率图像的 CSS答案

【问题标题】：CSS for high-resolution images on mobile and retina displays用于移动和视网膜显示器上的高分辨率图像的 CSS
【发布时间】：2012-06-19 02:42:23
【问题描述】：

对于使用 Retina 显示器的用户，我的网站图像看起来很模糊。（例如，在 Retina MacBook Pro 上）。

如何向使用 Retina 显示器的访问者提供高分辨率图像，但向其他所有人提供标准尺寸的图像，同时保持图像的外观尺寸相同？

【问题讨论】：

Javascript 解决方案：retinajs

标签： html css responsive-design media-queries retina-display

【解决方案1】：

在您的 HTML 中，像这样创建一个 <div>：

<div class="ninjas-image"></div>

在你的 CSS 中，添加：

.ninjas-image {
  background-image: url('ninja-devices.png');
  width: 410px;
  height: 450px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .ninjas-image {
    background-image: url('ninja-devices@2x.png');
    background-size: 410px 450px;
  }
}

这里的神奇之处在于 CSS @media 查询。当设备报告“设备像素比”为 1.5 (144 dpi) 或更高时，我们有一个双倍大小的图像 (ninja-devices@2x.png)。这样做可以让您通过将原始的、较小的图像传送到非视网膜设备来节省带宽，当然它在视网膜设备上看起来很棒。

注意：

此答案于 2016 年更新，以反映最佳实践。 min-device-pixel-ratio 没有达到标准。相反，min-resolution 被添加到标准中，但桌面和移动 Safari 在撰写本文时不支持它（因此-webkit-min-device-pixel-ratio 后备）。您可以通过http://caniuse.com/#feat=css-media-resolution查看最新信息。

【讨论】：

您可能希望解释一下这段代码是如何工作的：媒体查询和background-size 声明的目的是什么，等等。（顺便说一句，你不再需要-webkit-background-size...）
@BoltClock 添加了更多解释，并按照建议删除了 -webkit-background-size。谢谢！
它只是特定于 webkit 还是有其他 vedor 前缀？我怀疑还有-moz
@mastazi 已添加其他供应商前缀。谢谢！

【解决方案2】：

我们一直在使用以下方法来处理比率为 1.5 或更高的多种情况 - 这需要考虑更多设备和浏览器：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {

我们的整个网站都启用了 Retina：http://www.embraceware.com/

【讨论】：

@ChrisNolet，如果你想恢复到原来的，你应该回滚，不要尝试重新编辑。
对不起@psubsee2003 - 不知道该怎么做！我在此页面上没有看到任何回滚链接：stackoverflow.com/posts/11063689/revisions。你能伸出援助之手吗？谢谢。
@ChrisNolet 我的错...我忘了你只有在获得 2K 代表时才能回滚。我会为你回滚。