CSS @2x、@3x 和 @4x 图像的媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28374359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Media Queries for @2x, @3x, and @4x images
提问by Mastrianni
I am trying to support a variety of pixel ratios on the current site I'm developing. I also want to ensure I provide any required browser prefixes to support the widest variety of devices/browsers within reason. Also, I'm using SVG's wherever possible, but I need a solution for photographic images. Ideally, I'd like to provide:
我正在尝试在我正在开发的当前站点上支持各种像素比率。我还想确保我提供任何必需的浏览器前缀，以在合理范围内支持最广泛的设备/浏览器。此外，我尽可能使用 SVG，但我需要一个用于摄影图像的解决方案。理想情况下，我想提供：
- @1x image (Pixel Ratio 1.0)
- @2x image (Pixel Ratio of 1.25+)
- @3x image (Pixel Ratio of 2.25+)
- @4x image (Pixel Ratio of 3.25+)
- @1x 图像（像素比 1.0）
- @2x 图像（像素比为 1.25+）
- @3x 图像（像素比为 2.25+）
- @4x 图像（像素比为 3.25+）
My question is what would be the best way to go about writing the media queries to achieve this? My primary concern is that my arguments are correct for what I'm trying to achieve. I'd appreciate any suggestions or advice you have. Currently my code is as follows:
我的问题是编写媒体查询以实现这一目标的最佳方法是什么？我主要关心的是我的论点对于我想要实现的目标是正确的。我很感激你的任何建议或意见。目前我的代码如下：
/* @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/[email protected]);}
}
/* @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/[email protected]);}
}
/* @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/[email protected]);}
}
Alternative 1:I've been considering utilizing the <picture>tag to accomplish this. I know you can provide alternative content for browsers that don't support <picture>, which would be my primary concern in utilizing it. Do you guys think that would be the best practice for providing photos for multiple pixel ratios?
备选方案 1：我一直在考虑使用<picture>标签来实现这一点。我知道您可以为不支持 的浏览器提供替代内容<picture>，这将是我使用它时的主要关注点。你们认为这是为多个像素比率提供照片的最佳做法吗？
采纳答案by Alexander O'Mara
Well, ignoring the obvious functional differences between a background image and an inline image element such as picture, there are a few pros and cons between the two.
好吧，忽略背景图像和内嵌图像元素（例如 ）之间明显的功能差异，两者之间picture存在一些优缺点。
Pros for inline image / cons for background-image:
内嵌图像的优点/缺点background-image：
There is no way to use a media-query for an inline style, so specifying a background-imagerequires declaring a selector for whatever elements require background images separate from the tag. This complicates this solution for dynamically created elements.
无法对内联样式使用媒体查询，因此指定 abackground-image需要为需要与标签分离的背景图像的任何元素声明选择器。这使动态创建的元素的解决方案复杂化。
Also, if you are only interested in serving images with different pixel ratios, you can simply use the srcsetattribute of an imgtaginstead of the pictureelement. The pictureelement requires more markup and has a number of features that are unnecessary for this, plus srcsetis slightly better supported.
此外，如果您只对提供不同像素比的图像感兴趣，您可以简单地使用标签的srcset属性img而不是picture元素。该picture元素需要更多的标记，并具有许多不必要的功能，而且srcset支持稍好一些。
Pros for background-image/ cons for inline image:
background-image内嵌图像的优点/缺点：
Resolution-based media queries are much better supportedthan the pictureelementand the srcsetattribute. Some browsers do not support either the pictureelement or the srcsetattribute at this time, although support is improving.
基于分辨率媒体查询好得多支持比的picture元素和的srcset属性。一些浏览器目前不支持picture元素或srcset属性，尽管支持正在改进。
Incidentally, if you want to maximize browser support for Firefox versions older than 16, you can add the min--moz-device-pixel-ratioselector, which has the same syntax as -webkit-min-device-pixel-ratio. Here is an example using your CSS.
顺便说一句，如果你想最大限度地为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/[email protected]);}
}
Best-practice?
最佳实践？
Best practice would be to use media queries for places you need a background image, and either srcsetor picturefor places you need an inline image. However at this point, it may be more important to consider what browsers you need to support. For that, see the compatibly links (possibly considering that many people using older browsers are probably also using standard resolution monitors):
最佳实践是对需要背景图片的地方使用媒体查询，srcset或者picture对需要内嵌图片的地方使用媒体查询。但是此时，考虑您需要支持哪些浏览器可能更为重要。为此，请参阅兼容链接（可能考虑到许多使用旧浏览器的人可能也在使用标准分辨率显示器）：
回答by alexander farkas
Really use the img[srcset]attribute. Its support is much better than state in another answer. Current Chrome andSafari do support this attribute. And we knowthat, Firefox 38 and IE 12 will also support it. Additionally the syntax allows you to do simple progressive enhancement and you don't need to write complex media queries.
真正使用img[srcset]属性。它的支持比另一个答案中的 state 好得多。当前的 Chrome和Safari 确实支持此属性。我们知道，Firefox 38 和 IE 12 也将支持它。此外，语法允许您进行简单的渐进式增强，而无需编写复杂的媒体查询。
This is how it looks like:
这是它的样子：
<img src="img/[email protected]" srcset="img/[email protected] 2x, img/[email protected] 3x" />
And in case you want to add support to non-supporting browsers, you can choose between differentpolyfills.
如果您想为不支持的浏览器添加支持，您可以在不同的polyfills之间进行选择。
In case you use a polyfill you might change the markup to this:
如果您使用 polyfill，您可以将标记更改为：
<img srcset="img/[email protected], img/[email protected] 2x, img/[email protected] 3x" />
