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

以前这里也曾提出过许多类似的问题。我相信我的有点独特。 我用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文件可能不是优化我的应用程序中视网膜和非视网膜设备的图像的答案…

将每个图像放入css可能会很麻烦。我使用了ralph.m的方法处理小图像。但是新的W3C标准，即，已经在Chrome、Firefox和Opera上得到了支持。它将让设备决定下载的最佳图像。允许您现在在任何启用Javascript的设备上使用picture元素

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

我认为这个问题很好。“有没有更有效的方法？”-是的，但每种方法都有缺点。我认为那篇文章会让你对正反两方面有最好的了解。我不认为这是一个愚蠢的问题。我使用标准方法，提供两组图像。我认为您对@2x的引用是xcode中的某种东西，或者只是一种命名约定（我以前使用过这种约定）。我只是觉得把所有东西打包到我的css文件中，最终会有超过1000行的条件代码，这会让我的应用程序陷入困境。感谢链接misterManSam.LOL，我实际上是在了解如何正确构造css3媒体查询！我喜欢苹果最近推出的新的媒体查询webkit实现。我怀疑旧版iPhone会支持这一点，但一定要记住。请注意，有些设备可能会下载所有背景图像，即使它们没有全部使用。这就是我喜欢这里建议的方法的部分原因：。本质上，以大尺寸但低质量保存图像。在浏览器中调整其大小时，它在所有设备上看起来都很好。也有新的元素/属性来帮助实现这一点，但它们还有很长的路要走。感谢大家的建议，但是依靠JavaScript在移动设备上进行图像处理明智吗？我看到Firefox、Chrome和Opera都支持它，但它支持WebKit Safari吗？不过，这似乎是一个很好的解决方案。WebKit/Safari已经实现了相关的srcset语法：谢谢Michael。我将很快实现您的解决方案，以测试它是否在移动设备上运行良好，而不会让JS处理器陷入困境。现在我使用的CSS很可能会影响我的应用程序的响应速度。