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

如果我在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);
    }   
}

---

由于两个媒体查询都将完成，并且两个规则使用相同的选择器，因此第二个

div

规则将优先，并且对于任何

div

只加载

big.jpg

。一旦调整浏览器窗口的大小直到第二条规则不再适用，它应该继续加载

small.jpg

---

我用你的CSS做了一个快速测试页面。Firebug的网络面板验证了

big.jpg

是以我通常的浏览器大小加载的，而

small.jpg

只有在我把浏览器窗口弄得足够窄时才会加载。

谢谢博尔特，你是一个传奇！