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

Question

如果我在800px宽的屏幕上打开它,是否会加载小型和大型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加载的,只有在我使浏览器窗口足够窄时才加载.