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