使用媒体查询逐步加载图像

Question

如果我在 800px 宽的屏幕上打开它，小 jpg 和大 jpg 都会被加载吗？或者浏览器是否足够智能，可以忽略较小的图像？

@media screen and (min-width: 480px) {
    div {
        background-image: url(images/small.jpg);
    }
}

@media screen and (min-width: 600px) {
    div {
        background-image: url(images/big.jpg);
    }   
}

Answer 1

由于两个媒体查询都将得到满足，并且两个规则都使用相同的选择器，因此第二个 div 规则将优先，并且只会为任何 加载 big.jpg div。一旦您调整浏览器窗口的大小直到第二条规则不再适用，它应该继续加载 small.jpg。

我用你的 CSS 做了一个快速测试页面。 Firebug 的 Net 面板验证了 big.jpg 是以我常用的浏览器大小加载的，而 small.jpg 仅在我将浏览器窗口设置得足够窄后才加载。