Загрузится ли картинка в медиа блоке?

Question

[Дмитрий]

Загрузит ли браузер фоновую картинку, если ширина экрана меньше 500px

@media screen and (min-width: 500px) {
  body {
    background: url(...);
  }
}

Comments

[Dymok]

Можно проверить на вкладке network в devtools

Answer 1

[Никита Егоров]

Нет, это работает наоборот, он загрузит ее, если ширина больше либо равна 500px.
Что бы она загрузилась при width <= 500px, то используйте max-width.

@media screen and (max-width: 500px) {
  body {
    background: url(...);
  }
}

Answer 2

[profesor08]

Нет не загрузится, браузер начнет ее загружать только тогда, когда ширина окна будет больше либо равна 500px. В противном случае CSS свойство не будет активировано и не будет команды на загрузку изображения.