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

问题描述

对于使用 Retina 显示屏的用户来说，我的网站图像看起来很模糊.(例如，在 Retina MacBook Pro 上).

如何向使用 Retina 显示器的访问者提供高分辨率图像，向其他人提供标准尺寸的图像，同时保持图像的外观尺寸相同?

解决方案

在你的 HTML 中，像这样创建一个

:

并在您的 CSS 中添加:

.ninjas-image {背景图片:url('ninja-devices.png');宽度:410px；高度:450px；}@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {.ninjas-image {背景图片:url('[e-mail]');背景尺寸:410px 450px；}}

这里的神奇之处在于 CSS @media 查询.我们有一个双倍尺寸的图像 ([e-mail])，当设备报告设备像素比"为 1.5 (144 dpi) 或更高时，我们将其转入.这样做可以让您通过将原始的、较小的图像传送到非视网膜设备来节省带宽，当然它在视网膜设备上看起来很棒.

注意:

此答案已于 2016 年更新以反映最佳实践.min-device-pixel-ratio 没有达到标准.相反，min-resolution 已添加到标准中，但桌面和移动 Safari 在撰写本文时不支持它，(因此 -webkit-min-device-pixel-ratio 回退).您可以在以下位置查看最新信息:http://caniuse.com/#feat=css-media-分辨率.

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?

解决方案

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

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

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;
  }
}

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.

Note:

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屋！