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

Question

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

@1x 图像（像素比 1.0）
@2x 图像（像素比为 1.25+）
@3x 图像（像素比为 2.25+）
@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 than the picture element and the srcset attribute。一些浏览器目前不支持 picture 元素或 srcset 属性，尽管支持正在改进。

顺便说一下，如果您想最大限度地支持 Firefox 16 之前的版本，您可以添加 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。然而此时，考虑您需要支持哪些浏览器可能更为重要。为此，请参阅兼容链接（可能考虑到许多使用旧浏览器的人可能也在使用标准分辨率显示器）：

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

如果您想添加对不支持的浏览器的支持，您可以选择 different polyfills。

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

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

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

Media Queries for @2x, @3x, and @4x images

image

css

media-queries

retina-display

内联图像的优点/`background-image`的缺点：

`background-image` 的优点/内联图像的缺点：

最佳实践？

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

Media Queries for @2x, @3x, and @4x images

image

css

media-queries

retina-display

内联图像的优点/background-image的缺点：

background-image 的优点/内联图像的缺点：

最佳实践？

内联图像的优点/`background-image`的缺点：

`background-image` 的优点/内联图像的缺点：