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

时间：2015-02-06 20:36:19

标签： css image css3 media-queries retina-display

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

  1. @ 1x image（Pixel Ratio 1.0）
  2. @ 2x image（像素比率为1.25 +）
  3. @ 3x image（像素比率2.25 +）
  4. @ 4x image（像素比率为3.25 +）

    5. 我的问题是，编写媒体查询以实现此目的的最佳方式是什么？我主要担心的是，我的论点对于我正在努力实现的目标是正确的。我很感激您的任何建议或建议。目前我的代码如下：

    /* @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>的浏览器提供替代内容，这将是我使用它的主要问题。你们认为这是为多个像素比率提供照片的最佳做法吗？

2 个答案:

答案 0 :(得分：16)

那么，忽略背景图像和内联图像元素（如picture）之间明显的功能差异，两者之间存在一些利弊。

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

无法对内联样式使用媒体查询，因此指定background-image需要为需要将背景图像与标记分开的任何元素声明选择器。这使得动态创建元素的解决方案变得复杂。

此外，如果您只对提供不同像素比率的图片感兴趣，则只需使用srcset attribute of an img tag代替picture元素即可。 picture元素需要更多标记，并且具有许多不需要的功能，加上srcset稍微受到支持。

内联图片background-image / cons的优点：

基于分辨率的媒体查询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。但是，在这一点上，考虑您需要支持哪些浏览器可能更为重要。为此，请参阅兼容链接（可能考虑到许多使用旧浏览器的人可能也使用标准分辨率监视器）：

答案 1 :(得分：7)

确实使用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" />
相关问题
最新问题