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

Question

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

3

许多类似的问题在此之前已经被提出。我认为我的问题略有不同。我使用JQM + Cordova/PhoneGap开发了一个移动应用程序。最初，我使用大图像（针对Retina显示设备），并使用响应式CSS将图像按需缩小。这种方法的问题是旧设备需要下载大图像，而这些设备没有与新的Retina设备相同的处理“grunt”，从而导致不必要的开销。因此，我决定使用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文件可能不是优化应用程序中适用于视网膜和非视网膜设备的图像的答案...

- Ryan Coolwebs

在Smashing上有一篇有趣的文章，标题为“走向视网膜Web”。 - misterManSam

我认为这个问题很好。 “有更有效的方法吗？”- 是的，但是每种方法都有缺点。我认为那篇文章会给你最好的利弊分析。 - misterManSam

我不认为这是一个愚蠢的问题，Aleem。我正在使用标准方法并提供两组图像。我认为你提到的@2x是xcode中的某个东西或只是一种命名约定（我以前用过这种约定）。我只是觉得把所有东西都打包到我的css文件中最终会产生超过1000行的条件代码，并且会拖慢我的应用程序。感谢misterManSam提供的链接。 - Ryan Coolwebs

哈哈，我实际上是在遵循http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/上的信息，学习如何正确构建CSS3媒体查询！我喜欢苹果最近推出的Webkit媒体查询实现。老款iPhone可能还不支持，但绝对值得记住。 - Ryan Coolwebs

1

请注意，一些设备可能会下载所有背景图片，即使它们并没有全部使用。这部分是我喜欢采用这里建议的方法的原因：http://blog.netvlies.nl/design-interactie/retina-revolution/。本质上，将图像以大尺寸但低质量保存。当在浏览器中调整大小时，它在所有设备上看起来都很好。也有一些新的元素/属性可以帮助解决这个问题，但它们还需要一段时间才能推出。 - ralph.m

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael McGinnis · Accepted Answer

将每个图像都放在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>