媒体查询下载

Question

如果我使用媒体查询定义使用根据浏览器的大小不同的图像，比如我的背景：

@media (min-width:1440px){div.container{background:URL('bg1440.png');}} 
@media (min-width:960px){div.container{background:URL('bg960.png');}} 
@media (min-width:480px){div.container{background:URL('bg480.png');}} 

，这是我的div结构：

<div class="outerwrap"> 
    <div class="innerwrap"> 
    <div class="container"> 

容器班级是持有背景图片的人。

浏览器只会请求相关图片还是会请求所有图片？

如果我打开浏览器并调整它的大小，比如说从1440到960，媒体查询是否会请求两个相关图像，还是会请求所有图像？

如果它下载所有图像，我应该怎么做才能解决这个问题？

谢谢。

Answer 1

这取决于浏览器和平台。

此刻，most browsers will download the needed background image only。

请注意，对于其他媒体，行为可能会不同（包括不是背景图像的图像）。