用媒體查詢逐步加載圖片

Question

如果我在800px寬的屏幕上打開此項，是否會加載小圖片和大圖片？還是瀏覽器足夠智能，可以忽略較小的圖像？

@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的網絡面板驗證big.jpg正在我的瀏覽器大小正常加載，並且small.jpg只加載一次我讓我的瀏覽器窗口足夠窄。