Как реагируют медиа-запросы

Я хочу знать, как реагируют медиа-запросы.

Например, я разместил изображение размером 1400px на 500px для основных носителей и другое изображение размером 450px на 200px для мобильного устройства.

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

Если я вызову два CSS для одного и того же изображения (т.е. изменю фон с помощью CSS в соответствии с медиа), будет ли мое большое изображение загружено на мобильное устройство? Или он просто загрузит маленькое изображение, игнорируя большее? Я поместил основной CSS перед мобильным CSS. Я думаю, что большое изображение должно быть загружено. Если да, то мой сайт будет медленно работать на мобильных устройствах.

Какова ваша точка зрения?


css media-queries
person Ankur Vishnoi    schedule 06.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Нет, большая картинка не будет отображаться на мобильных устройствах, если вы вставите ее в медиа-запрос, исключающий ее. Но он будет загружен, если вы организуете свой CSS таким образом:

/* FIRST DECLARATION:
    BROWSER STARTS DOWNLOADING THE IMAGE */
.my-img-class{
    background:url(my-large-image.jpg);
}

/* SECOND DECLARATION:
    THE RULE ABOVE IS OVERWRITTEN, SO THIS IMAGE WILL BE DOWNLOADED TOO */
@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

Чтобы предотвратить загрузку большого изображения мобильными устройствами, вы должны обернуть оба правила в медиа-запрос.

Вот пример.

@media only screen and (max-width: 600px) {
    .my-img-class{
        background:url(my-small-image.jpg);
    }
}

Приведенный выше код будет интерпретироваться только устройствами с экраном меньше 600 пикселей.

@media screen and (min-width: 601px) {
    .my-img-class{
        background:url(my-large-image.jpg);
    }
}

Приведенный выше код будет интерпретироваться только устройствами с экраном больше 600 пикселей.

Вы можете использовать разные подходы, чтобы предотвратить загрузку обоих изображений.

Многое зависит от цели вашего сайта. Если мобильная версия используется наиболее широко, вы должны начать планировать ее, а затем постепенно, с помощью медиа-запросов, добавлять контент для настольной версии.

Вот некоторые ресурсы, которые вам пригодятся:

person Giona    schedule 06.10.2012