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

本文介绍了CSS用于移动和视网膜显示器上的高分辨率图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网站图片对于使用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('ninja-devices@2x.png');
    background-size: 410px 450px;
  }
}

这里的奇迹是在CSS @media 查询。我们有一个双倍大小的图像（ninja-devices@2x.png），当设备报告1.5（144 dpi）或更高的设备像素比率时，我们将其分入。这样做可以通过向非视网膜设备提供原始的更小的图像来节省带宽，当然在视网膜设备上看起来很不错。

The magic here is in the CSS @media query. We have a double-sized image (ninja-devices@2x.png) 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）。您可以访问以下网址查看最新信息：。

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用于移动和视网膜显示器上的高分辨率图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！