Question

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

如何为视网膜显示器的访客提供高分辨率图像，为其他人提供标准尺寸的图像，同时保持图像的相同外观尺寸？

Answer 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查询。我们有一个双倍大小的图像（ninja-devices@2x.png），当设备报告的“设备像素比率”为1.5（144 dpi）或更高时，我们会将其分入。这样做可以通过将原始的较小图像传送到非视网膜设备来节省带宽，当然它在视网膜设备上看起来很棒。

注意：

此答案于2016年更新，以反映最佳做法。 min-device-pixel-ratio没有符合标准。相反，min-resolution已添加到标准中，但桌面和移动版Safari在撰写本文时并不支持它（因此-webkit-min-device-pixel-ratio后备版本。您可以在以下网址查看最新信息：http://caniuse.com/#feat=css-media-resolution。

Answer 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/

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

2 个答案: