Css 对于全宽标题背景图像，您将使用哪种媒体查询堆栈？

我经常使用带有全幅背景图像的标题，如本页

对于背景图像，您会使用哪种媒体查询堆栈？ 我想移动设备使用的图像，是不是太大的文件大小，但也有视网膜设备有视网膜图像。 所以可能有一个关于视网膜Mac的大型媒体查询，可能有一个关于视网膜iPad的视网膜大小的压缩图像。对于小型移动设备，视网膜和非视网膜，可能有一个。。？ 它变得相当复杂，当然，我不希望有一个包含20个媒体查询的列表，以不同的分辨率和不同的（假设的）互联网速度，针对不同的屏幕大小

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

---

谢谢。

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

请查看自适应图像以实现此目的：

---

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

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

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

---

您可以以较大的尺寸保存图像，但质量相对较低，并且在所有设备（包括视网膜屏幕）上都很好看，如下所述：

我建议媒体查询取决于设备的宽度，当然也取决于这里的像素比：如果您仔细看，您的示例站点根本没有使用bg图像作为完整页面效果等。它实际上是HTML中的一个内联图像。背景图像很难做出响应，因为我们几乎没有可用的缩放选项。我使用具有所需图像纵横比的透明png，如果我想为不同的显示提供不同大小的文件，则使用css背景图像。是的，就目前而言，这是正确的，但它没有响应，因为在大多数情况下，它会扭曲图像或在底部留下间隙。除非能找到JS解决方案，否则真正的响应图像必须是内联的。

cover

不会扭曲图像或留下间隙。它保持图像的尺寸，填充容器，并且根据容器的尺寸，一些图像可能会被遗漏。抱歉，我应该说“裁剪或重新缩放”，而不是扭曲。在这种情况下可能没关系…谁知道呢。谢谢你的链接。但是，即使是在高压缩的情况下，为一款320像素宽的手机提供2880像素宽的图像还是很疯狂的，或者。。？因此，也许像一个非常压缩的2880

非常疯狂，可以提供2880像素宽的图像

。。。的确没必要把它弄得那么大。你说的没错，但请注意，我们谈论的是CSS背景图像。测试4和测试5显示，在大多数设备上，根据媒体查询，只加载“正确”的文件。在这里，您可以测试设备的功能。所以你可以在更大的屏幕上展示更大的图像等等。我坚持我所说的一切。在这些测试中，不是CSS媒体查询调整了所服务图像的大小，而是您有多个图像要服务。在我看来，这是一个非常低效的方式来建立一个网站。如果你想改变背景图像呢？如果你有多个背景图像呢？每个背景图像必须修改多个文件。我认为最好通过服务器端图像大小调整来实现这一点。还要注意的是，使用自适应图像之类的东西会加快整个站点的速度，因为它会影响所有图像。非常感谢Coop，我将尝试自适应图像！