媒体查询下载

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。

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