@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/[e-mail]);}
}

/* @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/[e-mail]);}
}

/* @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/[e-mail]);}
}

方案1: 我一直在考虑使用<picture>标签来实现这个目标。我知道你可以为不支持<picture>的浏览器提供备选内容，这也是我使用它的主要担忧。你们认为这是否是为多个像素比例提供照片的最佳实践？

- Mastrianni

---

简短问题：您的图像在所有设备上的宽度都一样吗？ - alexander farkas

对于大多数设备，图像尺寸是相同的。我只是为高像素密度显示器更换资产。但是对于较低的断点，由于屏幕尺寸限制，一些图像具有较小的尺寸。 - Mastrianni

Answer 1

忽略背景图片和picture这种内联图像元素之间的明显功能差异，两者之间存在一些优缺点。

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

无法使用媒体查询来指定内联样式，因此需要为需要背景图像的任何元素单独声明选择器来指定background-image。这复杂化了动态创建元素的解决方案。

此外，如果你只想提供具有不同像素比率的图像，可以简单地使用img标记的srcset属性而不是picture元素。对于此操作，picture元素需要更多的标记和许多不必要的特性，而且srcset略微得到更好的支持。

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

与picture元素和srcset属性相比，基于分辨率的媒体查询得到更好的支持。某些浏览器目前不支持picture元素或srcset属性，尽管支持正在改善。

顺便说一下，如果你想最大化对Firefox版本16之前的浏览器的支持，可以添加min--moz-device-pixel-ratio选择器，它具有与-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/[e-mail]);}
}

最佳实践？

在需要背景图像的地方使用媒体查询，并在需要内联图像的地方使用 srcset 或 picture。然而，现在更重要的是考虑需要支持哪些浏览器。为此，请参阅兼容性链接（可能要考虑许多使用旧版浏览器的人也可能正在使用标准分辨率监视器）：

• CSS 媒体分辨率
• picture 元素
• srcset 属性

- Alexander O'Mara

---

你有没有注意到dppx无法通过W3C验证工具？ - Ronnie Royston

Answer 2

真正使用img[srcset]属性。相比其他答案中提到的情况，它的支持性更好。当前的Chrome和Safari都支持这个属性。而且我们知道，Firefox 38和IE 12也将支持它。此外，语法允许您进行简单的渐进增强，无需编写复杂的媒体查询。

它的样子是这样的：

<img src="img/[e-mail]" srcset="img/[e-mail] 2x, img/[e-mail] 3x" />

如果您想为不支持的浏览器添加支持，您可以在不同的polyfills之间进行选择。

如果您使用了polyfill，您可能需要将标记更改为：

<img srcset="img/[e-mail], img/[e-mail] 2x, img/[e-mail] 3x" />

- alexander farkas

---

更大尺寸和比例的图像是由于苹果最新的视网膜屏幕（在iPhone 6上）需要3倍图像，他们在市场上也有一款4K显示器的iMac。4倍图像只是我试图为4K显示器做好未来准备。这些图像也进行了压缩处理。 - Mastrianni