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

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.