0

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

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

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

谢谢你。

4

2 回答 2

0

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

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

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

于 2013-10-08T12:58:16.540 回答
0

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

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

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

于 2013-10-08T12:19:52.890 回答