我应该使用 CSS3 媒体查询为视网膜显示设备提供不同的图像尺寸吗？答案

【问题标题】：Should I use CSS3 media queries to deliver different image sizes for retina display devices?我应该使用 CSS3 媒体查询为视网膜显示设备提供不同的图像尺寸吗？
【发布时间】：2014-08-13 00:58:49
【问题描述】：

很多类似的问题以前在这里被问过。我相信我的有点独特。我用 JQM + Cordova/PhoneGap 开发了一个移动应用程序。

最初我使用大图像（针对视网膜显示设备）并使用响应式 css 来根据需要缩小图像。这种方法的问题是，旧设备最终不得不下载大图像，并且这些设备不会像新的视网膜设备那样具有相同的处理“咕噜声”——导致不必要的开销。

我决定使用 css 背景图像，因为我听说它们的加载速度比图像 HTML 标签更快（因为所有内容都首先在 css 中加载），然后使用 css3 媒体查询，如下所示：

@media 
(-webkit-min-device-pixel-ratio: 1), 
(max-resolution: 163dpi) { 
.pic #point1 {background-image: url(../img/baby/nonretina/Baby-TP1-Role-Models.jpg); border: 2px solid #ccc;}
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 326dpi) { 
.pic #point1 {background-image: url(../img/baby/retina/Baby-TP1-Role-Models.jpg); border: 2px solid #ccc;}
}

现在问题来了，我的应用程序中有一堆图像（数百个），所以我的 css 文件会非常大。考虑到我的应用需要在第一页/视图 (index.html) 中加载 css，这会对我的应用加载时间产生负面影响吗？我应该继续使用这种方法还是恢复以前的方法？

我只是觉得一个包含大量媒体查询的大型 css 文件可能无法在我的应用中针对视网膜和非视网膜设备优化图像...

【问题讨论】：

Interesting read here on Smashing
我觉得这个问题很好。 “有没有更有效的方法？” - 是的，但使用的每种方法都有缺点。我认为那篇文章会让你对优缺点有最好的了解。
我不认为这是一个愚蠢的问题 Aleem。我正在使用标准方法并提供两组图像。我认为您对 @2x 的引用是 xcode 中的某些内容，或者只是一个命名约定（我之前使用过该约定）。我只是觉得将所有内容打包到我的 css 文件中最终会得到超过 1000 行条件代码，这会使我的应用程序陷入困境。感谢链接先生ManSam。
大声笑，我实际上是在关注smashingmagazine.com/2013/07/22/… 上有关如何正确构建 css3 媒体查询的信息！我喜欢 Apple 最近推出的媒体查询的新 webkit 实现。怀疑较旧的 iphone 是否会支持这一点，但一定要牢记。
请注意，某些设备可能会下载所有背景图像，即使它们并未全部使用。这就是为什么我更喜欢这里建议的方法的部分原因：blog.netvlies.nl/design-interactie/retina-revolution。在 Essence 中，以大尺寸但低质量保存图像。在浏览器中调整大小时，它在所有设备上看起来都不错。也有新的元素/属性出现来帮助解决这个问题，但它们还有很长的路要走。

标签： css cordova media-queries

【解决方案1】：

将每张图片都放入 CSS 中可能会很麻烦。我对小图像使用了 ralph.m 的方法。但是新的 W3C 标准 picture element 已经在 Chrome、Firefox 和 Opera 上得到支持。它将让设备决定要下载的最佳图像。 PictureFill polyfill 让您现在可以在任何支持 Javascript 的设备上使用图片元素。

<picture>
  <source media="(min-width: 40em)" srcset="nonretinaBaby.jpg 1x,
    retinaBaby.jpg 2x">
  <source srcset="nonretinaBaby.jpg 1x, retinaBaby.jpg 2x">
  <img src="fallback.jpg" alt="">
</picture>

【讨论】：

非常感谢您的建议，但是依靠 JavaScript 在移动设备上进行图像处理是否明智？我看到 Firefox、Chrome 和 Opera 都支持它——但它支持 WebKit Safari 吗？不过，这似乎是一个很好的解决方案。
WebKit/Safari 已经实现了相关的 srcset 语法：
谢谢迈克尔。我将很快实施您的解决方案，以测试它是否在移动设备上运行良好，而不会让处理器陷入 JS 的困境。现在，我使用的所有 CSS 很可能会影响我的应用程序的响应速度。