Question

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

您将使用哪种媒体查询 - 堆栈作为背景图片？我希望移动设备使用文件大小不太大的图像，但视网膜设备也有视网膜图像。所以也许有一个像视网膜macs的大媒体查询，可能是一个真正压缩的图像与视网膜大小的视网膜大小。也许适用于小型移动设备，视网膜和非视网膜..？它变得非常复杂，当然我不希望有20个媒体查询的列表来定位不同的屏幕尺寸，具有不同的分辨率和不同的（假定的）互联网速度。

思考？你会优先考虑哪些设备？

谢谢。

Answer 1

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

看一下自适应图像：http://adaptive-images.com/

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

Answer 2

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

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

您可以将图像保存在较大尺寸但质量相对较低的情况下，所有设备（包括视网膜屏幕）都能保持良好状态，如下所示：http://blog.netvlies.nl/design-interactie/retina-revolution/

什么样的媒体查询堆栈将用于全宽标题背景图像？

2 个答案: