Question

如果我创建一个容器并希望根据媒体查询设置背景图像，为什么浏览器（Firefox，Chrome）会下载中等大小的图像（如果已经下载了大图像）？这似乎完全违背了这一点（即节省带宽）。

HTML

<div id="background"></div>

CSS

#background {
    width: 100%;
    height: 400px;
    background-image: url(/content/images/2016/04/airport-small.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 500px) {
  #background {
    background: url(/content/images/2016/04/airport-medium.jpg);
  }
}
@media (min-width: 800px) {
  #background {
    background: url(/content/images/2016/04/airport-large.jpg);
  }
}

如果我加载页面，浏览器会在此设置中下载-large.jpg。如果我调整屏幕大小（低于800px），浏览器会下载并呈现-medium.jpg，依此类推。

我该如何防止这种情况？

Answer 1

我认为这里冲突的主要原因是你假设媒体查询是为了节省带宽而实施的。它们被实现为以不同的尺寸显示不同的东西，就是这样。您选择以不同大小显示相同图像的事实只是您决定如何使用它们，而媒体查询只是忠实地执行他们一直承诺的事情：向用户显示您告诉它的内容以向用户显示

我建议评估这是否真的值得投入时间和代码（请记住，大多数用户不会调整窗口大小或旋转移动设备，而那些可能不会被推迟的人闪光和重装）。如果您决定这样做，它将不仅仅通过CSS。您最好的选择是研究JavaScript方法来执行此操作，例如向body标签onload添加类loaded-large，然后为较小的图像编写CSS规则，仅在body标签没有{{1 }}

希望这有帮助。

Answer 2

您正在调整窗口大小，导致多个媒体查询执行，从而导致下载多个图像。

但是，您是一名Web开发人员，为了测试目的而重新调整浏览器的大小。实际用户通常不这样做。用户只需登陆您的网站即可开展业务 - 在一个屏幕上。

在您的情况下，如果此用户位于浏览器宽度为500px - 799px的设备上，他/她将获得中等jpg和/或小jpg，具体取决于浏览器（见下文）。

请注意，屏幕宽度大于800像素的用户可能会获得所有三张图片。（与min-width: 800px匹配的窗口也匹配min-width: 500px。）

根据Media Query & Asset Downloading Results的评论，浏览器行为在图片下载方面有所不同。特别是，参见测试＃4。

另外，请考虑 picture 元素，该元素告诉浏览器哪个图片最适合特定的屏幕尺寸。

4.8.2 The picture element

picture元素是一个提供多个来源的容器   到其包含的img元素，以允许作者以声明方式   控制或向用户代理提供关于哪个图像资源的提示   使用，根据屏幕像素密度，视口大小，图像格式，   和其他因素。

<picture>
   <source srcset="airport-small.jpg"  media="(max-width: 499px)">
   <source srcset="airport-medium.jpg" media="(min-width: 500px) and (max-width: 799px)">
   <source srcset="airport-large.jpg"  media="(min-width: 800px)">
   <img src="airport-small.jpg" alt="">
</picture>

如果所有source元素都评估为false，则会应用img元素。这是一个有用的后备，因为Internet Explorer不支持picture。

参考文献：

Media Queries Specification ~W3C
Media Query & Asset Downloading Results ~Tim Kadlec
4.8.2 The picture element ~W3C
picture definition ~MDN
picture browser support ~caniuse.com
Polyfill for the picture element ~Picturefill

使用媒体查询来控制图像下载

2 个答案: