13

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

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

4

2 回答 2

11

在您的 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 。

于 2012-06-16T03:52:38.570 回答
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/

于 2012-06-16T13:07:00.857 回答