CSS用于移动和视网膜显示器上的高分辨率图像 [英] CSS for high-resolution images on mobile and retina displays

问题描述

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

My website images look blurry for users with retina displays. (For example, on the Retina MacBook Pro).

如何向具有视网膜显示器的游客提供高分辨率图像，但对其他人提供标准尺寸的图像，

How do I serve high-resolution images to visitors with retina displays, but standard-sized images to everyone else, while keeping the image the same apparent size?

推荐答案

在HTML中，创建一个< div> / code>如此：

In your HTML, create a <div> like so:

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

在您的CSS中，添加：

And in your CSS, add:

.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）或更高的设备像素比率时，我们将其分入。这样做可以通过向非视网膜设备提供原始的更小的图像来节省带宽，当然在视网膜设备上看起来很不错。

The magic here is in the CSS @media query. We have a double-sized image ([e-mail]) that we sub-in when the device reports a ‘device pixel ratio’ of 1.5 (144 dpi) or more. Doing it this way allows you to save on bandwidth by delivering the original, smaller image to non-retina devices, and of course it looks great on retina devices.

注意：

此回答在2016年更新，以反映最佳做法。 min-device-pixel-ratio 没有达到标准。相反， min-resolution 被添加到标准，但桌面和移动Safari不支持它在写作时，（因此 webkit-min-device-pixel-ratio fallback）。您可以访问以下网址查看最新信息： http://caniuse.com/#feat=css-media -resolution 。

This answer was updated in 2016 to reflect best-practice. min-device-pixel-ratio did not make it in to the standard. Instead, min-resolution was added to the standard, but desktop and mobile Safari don't support it at the time of writing, (thus the -webkit-min-device-pixel-ratio fallback). You can check the latest information at: http://caniuse.com/#feat=css-media-resolution.

这篇关于CSS用于移动和视网膜显示器上的高分辨率图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！