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

Question

如果我在 800 像素宽的屏幕上打开它，会同时加载小 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 规则将优先，并且对于任何div 只会加载big.jpg。一旦你调整浏览器窗口的大小直到第二条规则不再适用，它应该继续加载small.jpg。

我使用您的 CSS 制作了一个快速测试页面。 Firebug 的网络面板验证 big.jpg 正在以我通常的浏览器大小加载，而 small.jpg 仅在我使浏览器窗口足够窄时才加载。