媒体查询@ 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:

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

此外,如果您只对提供不同像素比率的图像感兴趣,则可以简单地使用标记的srcset属性img而不是picture元素.该picture元素需要更多标记,并且具有许多不需要的功能,并且srcset稍微更好地支持.

background-image内嵌图像的优点/缺点:

基于分辨率媒体查询好得多支持比的picture元素和的srcset属性.有些浏览器目前不支持picture元素或srcset属性,但支持正在改善.

顺便说一句,如果你想最大限度地为16岁以上的Firefox版本的浏览器支持,可以添加的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/shopping_bag@2x.png);}
}

最佳实践？

最佳做法是对需要背景图像的场所使用媒体查询,srcset或者picture对于需要内嵌图像的场所使用媒体查询.但是,在这一点上,考虑您需要支持哪些浏览器可能更为重要.为此,请参阅兼容链接(可能考虑到许多使用旧浏览器的人可能也使用标准分辨率监视器):

• CSS媒体解析
• 图片元素
• srcset属性

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

如果您想添加对不支持的浏览器的支持,您可以选择不同的 polyfill.

如果您使用polyfill,您可能会将标记更改为:

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