0

При использовании media-запросов в CSS будет ли загружаться background для десктопа, если разрешение соответствует мобильному устройству?

2 ответа 2

3

Если у вас есть медиа-запрос для мобильных устройств, то картинка не будет загружаться для десктопа, если вы загрузили сайт на телефоне или в маленьком окне браузере. То же самое работает в обратную сторону.

Пример

div {
  height: 512px;
  width: 512px;
  background-image: url("http://pngimg.com/uploads/facebook_logos/facebook_logos_PNG19753.png");
}

@media screen and (min-width: 240px) and (max-width:830px) {
  div {
    background-image: url("http://download.seaicons.com/icons/limav/flat-gradient-social/128/Facebook-icon.png");
  }
}
<div></div>

Можете убедиться в этом сами во вкладке браузера netwrok, если будите открывать страничку на разных разрешениях.

Результат загрузки при маленьком разрешении

введите сюда описание изображения Как видно из скриншота, для маленького разрешения загрузился соответствующий background и никакой другой.

2

Нет, в этом медиа запросе говорится что на разрешении от 500рх и выше будет картинка 1.jpg

@media screen and (min-width: 500px) {
  background-image: url("../img/1.jpg");
}

а в этом, что от 1000рх уже будет 2.jpg, следовательно 1.jpg уже выводиться не будет

@media screen and (min-width: 1000px) {
  background-image: url("../img/2.jpg");
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.