Постепенная загрузка изображений с помощью медиазапросов

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 будет иметь приоритет, и для любого div будет загружено только big.jpg. После изменения размера окна браузера до тех пор, пока второе правило больше не применяется, оно должно идти вперед и загрузить small.jpg.

Я сделал быструю тестовую страницу с вашим CSS. Сетевая панель Firebug подтвердила, что big.jpg загружался в моем обычном размере браузера, а small.jpg загружался только после того, как окно браузера стало достаточно узким.