html - 媒体查询下载

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

这取决于浏览器和平台。

目前，大多数浏览器只会下载需要的背景图片。

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