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

Question

我正在尝试在我正在开发的当前网站上支持各种像素比率。我还想确保我提供任何必需的浏览器前缀，以在合理范围内支持最广泛的设备/浏览器。此外，我尽可能使用 SVG，但我需要摄影图像的解决方案。理想情况下，我想提供：

1. @1x 图像（像素比 1.0）
2. @2x 图片（像素比 1.25+）
3. @3x 图像（像素比为 2.25+）
4. @4x 图像（像素比 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/shopping_bag@2x.png);}
}

/* @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/shopping_bag@3x.png);}
}

/* @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/shopping_bag@4x.png);}
}

备选方案 1： 我一直在考虑使用 <picture> 标记来完成此操作。我知道您可以为不支持<picture> 的浏览器提供替代内容，这将是我在使用它时最关心的问题。你们认为这将是提供多像素比例照片的最佳做法吗？

Answer 1

好吧，忽略背景图像和内联图像元素（如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/shopping_bag@2x.png);}
}

最佳实践？

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

• CSS media resolution
• picture element
• srcset attribute

Answer 2

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

看起来是这样的：

<img src="img/shopping_bag@1x.png" srcset="img/shopping_bag@2x.png 2x, img/shopping_bag@3x.png 3x" />

如果你想为不支持的浏览器添加支持，你可以选择differentpolyfills。

如果您使用 polyfill，您可以将标记更改为：

<img srcset="img/shopping_bag@1x.png, img/shopping_bag@2x.png 2x, img/shopping_bag@3x.png 3x" />