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

我的网站图像看起来模糊的用户与视网膜显示. (例如,在Retina MacBook Pro上).

如何使用视网膜显示器向访客提供高分辨率图像,但是将标准尺寸的图像提供给其他人,同时保持图像的一致性？

解决方法

在您的 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('[e-mail]');
    background-size: 410px 450px;
  }
}

这里的魔法是在CSS @media查询中.我们有一个双重尺寸的图像([e-mail]),当设备报告“设备像素比”为1.5(144 dpi)或更高时,我们进入.这样做可以通过将原始的较小图像传递给非视网膜设备来节省带宽,当然,它在视网膜设备上看起来非常棒.

注意：

这个答案在2016年更新,以反映最佳实践. min-device-pixel-ratio没有达到标准.相反,最小分辨率被添加到标准中,但桌面和移动Safari在编写时不支持(因此-webkit-min-device-pixel-ratio fallback).您可以查看最新信息：http://caniuse.com/#feat=css-media-resolution.