【问题标题】:CSS for high-resolution images on mobile and retina displays用于移动和视网膜显示器上的高分辨率图像的 CSS
【发布时间】:2012-06-19 02:42:23
【问题描述】:

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

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

【问题讨论】:

标签: html css responsive-design media-queries retina-display


【解决方案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 查询。当设备报告“设备像素比”为 1.5 (144 dpi) 或更高时,我们有一个双倍大小的图像 (ninja-devices@2x.png)。这样做可以让您通过将原始的、较小的图像传送到非视网膜设备来节省带宽,当然它在视网膜设备上看起来很棒。

注意:

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

【讨论】:

  • 您可能希望解释一下这段代码是如何工作的:媒体查询和background-size 声明的目的是什么,等等。 (顺便说一句,你不再需要-webkit-background-size...)
  • @BoltClock 添加了更多解释,并按照建议删除了 -webkit-background-size。谢谢!
  • 它只是特定于 webkit 还是有其他 vedor 前缀?我怀疑还有-moz
  • @mastazi 已添加其他供应商前缀。谢谢!
【解决方案2】:

我们一直在使用以下方法来处理比率为 1.5 或更高的多种情况 - 这需要考虑更多设备和浏览器:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {

我们的整个网站都启用了 Retina:http://www.embraceware.com/

【讨论】:

  • @ChrisNolet,如果你想恢复到原来的,你应该回滚,不要尝试重新编辑。
  • 对不起@psubsee2003 - 不知道该怎么做!我在此页面上没有看到任何回滚链接:stackoverflow.com/posts/11063689/revisions。你能伸出援助之手吗?谢谢。
  • @ChrisNolet 我的错...我忘了你只有在获得 2K 代表时才能回滚。我会为你回滚。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-04-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-29
  • 2012-10-20
相关资源
最近更新 更多