我正在开发的网站需要支持多种像素比率。我希望在合理范围内提供所需的浏览器前缀以支持尽可能广泛的设备/浏览器。我尽可能使用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>
的浏览器提供备选内容,这也是我使用它的主要担忧。你们认为这是否是为多个像素比例提供照片的最佳实践?