对于全角标题背景图像，您会使用哪种媒体查询堆栈？答案

【问题标题】：What kind of media query stack would you use for full-width header background-image?对于全角标题背景图像，您会使用哪种媒体查询堆栈？
【发布时间】：2013-10-08 12:07:29
【问题描述】：

我经常使用带有全宽背景图像的标题，例如此页面http://thegreatdiscontent.com/adam-lisagor

您会为背景图片使用哪种媒体查询堆栈？我希望移动设备使用文件大小不太大的图像，但视网膜设备也有视网膜图像。因此，也许有类似针对视网膜 mac 的大型媒体查询，也许是针对视网膜 ipad 的具有视网膜大小的真正压缩图像。也许一个用于小型移动设备，视网膜和非视网膜......？它变得相当复杂，当然我不希望有一个包含 20 个媒体查询的列表来针对具有不同分辨率和不同（假定）互联网速度的不同屏幕尺寸。

想法？您会优先考虑哪些设备？

谢谢。

【问题讨论】：

我建议媒体查询依赖于宽度而不是设备，并像这里的那样偏离像素比：css-tricks.com/snippets/css/retina-display-media-query
如果您仔细观察，您的示例网站根本没有使用 bg 图像来实现整页效果等。它实际上是 HTML 中的内嵌图像。背景图像很难做出响应，因为我们可用的缩放选项很少。
我使用具有所需图像纵横比的透明 png，然后如果我想为不同的显示器提供不同大小的文件，则使用 css 背景图像。

标签： css media-queries

【解决方案1】：

我认为您误解了 CSS 媒体查询的意义。他们不会更改提供的文件大小。 CSS 只是客户端脚本。如果您想为较小的屏幕或较慢的互联网连接提供较小文件大小的图像，您需要在服务器端执行此操作。

看看自适应图像来做到这一点：http://adaptive-images.com/

媒体查询只允许您调整原始图像的大小，因此它仍会加载完整大小的图像，然后调整它的大小。

【讨论】：

使用你是对的，但请注意我们谈论的是 CSS 背景图像。 timkadlec.com/2012/04/media-query-asset-downloading-results 在测试四和测试五中，根据媒体查询，在大多数设备上只加载了“正确”的文件。 timkadlec.com/mq/test3.php 在这里您可以测试您的设备的功能。所以你可以为更大的屏幕等提供更大的图像。
我坚持我所说的一切。在这些测试中，调整所提供图像大小的不是 CSS 媒体查询，而是您有多个图像要提供的事实。在我看来，这是一种非常低效的网站构建方式。如果您想更改背景图像怎么办？如果您有多个背景图像怎么办？您必须为每个背景图像更改多个文件。我认为最好通过服务器端图像大小调整来实现这一点。
还要注意，使用自适应图像之类的东西会加速您的整个网站，因为它会影响所有图像。
非常感谢 Coop，我会尝试自适应图像！

【解决方案2】：

background-size 属性可以很好地保持背景图像填充可用区域。例如

#header {
    background: url(image.png) no-repeat;
    background-size: cover;
}

您可以保存较大尺寸但质量相对较低的图像，并且在包括视网膜屏幕在内的所有设备上看起来都不错，如下所述：http://blog.netvlies.nl/design-interactie/retina-revolution/

【讨论】：

是的，就目前而言确实如此，但它没有响应性，因为它会扭曲图像或在大多数情况下在底部留下空隙。除非可以找到 JS 解决方案，否则真正的响应式图像必须是内联的。
cover 不会扭曲图像或留下空隙。它保持图像的尺寸，填充容器，并且某些图像可能会被遗漏，具体取决于容器的尺寸。
抱歉，我应该说“裁剪或重新缩放”而不是扭曲。在这种情况下可能没关系……谁知道呢。
感谢您的链接。但是，即使进行了重度压缩，为具有 320 像素宽显示屏的手机提供 2880 像素宽的图像似乎还是很疯狂的，或者..？所以也许就像一个非常压缩的 2880
pretty wild to serve a 2880px wide image ...确实如此。没必要把它弄得那么大。