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

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仅在浏览器窗口缩小时加载。{/ p>