之前已经在这里问过许多类似的问题。我相信我的有点独特。
我用 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 标准图片元素 http://responsiveimages.org/，已在 Chrome、Firefox 和 Opera 上受支持。它将让设备决定下载最佳图像。这PictureFill 填充 https://github.com/scottjehl/picturefill/现在，您可以在任何支持 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
