我应该使用CSS3媒体查询为视网膜显示设备提供不同的图像大小吗？ [英] Should I use CSS3 media queries to deliver different image sizes for retina display devices?

问题描述

之前有很多类似的问题。我相信我是轻微的独特。
我已经开发了一个移动应用程序与JQM + Cordova / PhoneGap。

Many similar questions have been asked here before. I believe mine is slightly unique. I have developed a mobile app with JQM + Cordova/PhoneGap.

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

Originally I used big images (targeted towards retina display devices) and used responsive css to scale image down as needed. The problem with this approach that older devices end up having to download big images and these devices would not have the same processing 'grunt' that newer retina devices have - causing unnecessary overheads.

我决定使用CSS背景图像，因为我听说他们加载比图像HTML标签（因为一切都加载在CSS首先），然后使用css3媒体查询如下：

I decided to use css background images because I have heard they load faster than image HTML tags (as everything is loaded in css first) and then use css3 media queries like below:

@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，这会对我的应用程序加载时间产生负面影响吗？我应该仍然使用这种方法还是回到前一种方法？

Now comes the issue, I have got stacks of images within my app (hundreds) so my css file is going to be quite large. Considering my app will need to load the css in the first page/view (index.html), will this negatively impact on my app load time? Should I still use this approach or revert to the former approach?

我只是觉得像一个大的CSS文件与媒体查询可能不是优化图像的答案我的应用程序为视网膜和非视网膜设备...

I just feel like a big css file with heaps of media queries may not be the answer to optimise images within my app for both retina and non retina devices...

推荐答案

将每个图像放在你的CSS可能是繁重的。我使用ralph.m的方法为小图片。但是新的W3C标准，即图片元素，已经在Chrome，Firefox和Opera上支持。它将让设备决定最好的图像下载。 PictureFill polyfill 可让您在任何启用Javascript的设备上使用图片元素。

Putting every image in your CSS can be burdensome. I've used ralph.m's method for small images. But the new W3C standard, the picture element, already supported on Chrome, Firefox and Opera. It will let devices decide the best image to download. The PictureFill polyfill lets you use the picture element now on any Javascript-enabled device.

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

这篇关于我应该使用CSS3媒体查询为视网膜显示设备提供不同的图像大小吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！