我正试图在我正在开发的当前网站上支持各种像素比例。我还想确保提供任何必需的浏览器前缀，以便在合理范围内支持最广泛的各种设备/浏览器。另外，我尽可能使用SVG，但我需要一个用于摄影图像的解决方案。理想情况下，我想提供：@ 2x，@ 3x和@ 4x图像的媒体查询

@ 1X图像（像素比1.0）
@ 2倍的图像（的1.25+像素比）
@ 3倍的图像（的2.25+像素比）
@ 4倍的图像（的3.25+像素比）

我的问题是什么是去写的媒体查询来实现这一目标的最佳方式是什么？我主要关心的是，我的论点对于我想实现的目标是正确的。我会很感激你的任何建议或建议。目前，我的代码如下：

/* @1x Images (Pixel Ratio 1.0) */ 
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);} 

/* @2x Images (Pixel Ratio of 1.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 5/4), 
     only screen and (-webkit-min-device-pixel-ratio: 1.25), 
     only screen and (min-device-pixel-ratio: 1.25), 
     only screen and (min-resolution: 1.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/[email protected]);} 
} 

/* @3x Images (Pixel Ratio of 2.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 9/4), 
     only screen and (-webkit-min-device-pixel-ratio: 2.25), 
     only screen and (min-device-pixel-ratio: 2.25), 
     only screen and (min-resolution: 2.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/[email protected]);} 
} 

/* @4x Images (Pixel Ratio of 3.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 13/4), 
     only screen and (-webkit-min-device-pixel-ratio: 3.25), 
     only screen and (min-device-pixel-ratio: 3.25), 
     only screen and (min-resolution: 3.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/[email protected]);} 
}

选择1：我一直在考虑利用<picture>标签来做到这一点。我知道您可以为不支持<picture>的浏览器提供替代内容，这是我使用它的主要关注点。你们认为这是提供多像素比例照片的最佳做法吗？

来源

2015-02-06 Mastrianni

简短的问题：你们的图像上的所有设备都相同的宽度？ – 2015-02-26 10:18:09

对于大多数设备，图像尺寸是相同的。我只是换出高像素密度显示器的资产。但是对于较低的断点，由于屏幕尺寸限制，某些图像尺寸较小。 – Mastrianni 2015-02-26 18:49:27

好吧，忽略背景图像和嵌入图像元素（如picture）之间的明显功能差异，这两者之间有一些优缺点。

优点为`background-image`用于在线图像/缺点：

没有办法使用媒体查询了一种直列式，所以指定background-image需要宣布为任何元件需要背景图像选择器从所述标签分离。这使动态创建的元素的解决方案变得复杂。另外，如果您只对使用不同像素比率的图像提供服务感兴趣，则只需使用srcset attribute of an img tag而不是picture元素即可。 picture元素需要更多标记，并且有一些对此不必要的特性，再加上srcset的支持稍好。

优点为内嵌图像`background-image` /缺点：

基于分辨率的媒体查询are much better supported比the picture element和the srcset attribute。某些浏览器目前不支持picture元素或srcset属性，尽管支持正在改进。顺便说一下，如果您想最大限度地利用浏览器对16岁以下版本Firefox的支持，则可以添加the min--moz-device-pixel-ratio selector，其语法与-webkit-min-device-pixel-ratio相同。这里是一个使用你的CSS的例子。

/* @2x Images (Pixel Ratio of 1.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 5/4), 
     only screen and (-webkit-min-device-pixel-ratio: 1.25), 
     only screen and (min--moz-device-pixel-ratio: 1.25), 
     only screen and (min-device-pixel-ratio: 1.25), 
     only screen and (min-resolution: 1.25dppx) { 
    #dgst_shopping_bag {background-image:url(img/[email protected]);} 
}

最佳做法？

最佳做法是对需要背景图像的地方使用媒体查询，对于需要内嵌图像的地方使用srcset或picture。然而在这一点上，考虑你需要支持哪些浏览器可能更重要。为此，请参阅兼容链接（可能是考虑到许多人使用旧的浏览器很可能也采用标准分辨率显示器）：

来源

2015-02-25 18:26:40

真正使用的img[srcset]属性。在另一个答案中，它的支持比状态好得多。目前的Chrome 和 Safari确实支持这个属性。而我们知道，Firefox 38和IE 12也会支持它。此外，该语法允许您执行简单的渐进式增强，并且不需要编写复杂的媒体查询。

这是它的样子：

<img src="img/[email protected]" srcset="img/[email protected] 2x, img/[email protected] 3x" />

而如果你想支持添加到非支持的浏览器，你可以different polyfills之间进行选择。

如果您使用填充工具，你可以标记改成这样：

<img srcset="img/[email protected], img/[email protected] 2x, img/[email protected] 3x" />

来源

2015-02-25 23:00:58

更大的图像和比例的原因是因为苹果最新的视网膜显示屏（在iPhone 6上）需要3x图像，他们也有一个市场上的4k显示器的iMac。 4x图像仅仅是我对4k显示器的不太遥遥无期的证明。图像也被压缩。 – Mastrianni 2015-02-26 01:38:25

@ 2x，@ 3x和@ 4x图像的媒体查询

回答

优点为background-image用于在线图像/缺点：

优点为内嵌图像background-image /缺点：

最佳做法？

相关问题

优点为`background-image`用于在线图像/缺点：

优点为内嵌图像`background-image` /缺点：