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

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

Единственный способ, которым я могу это сделать, - иметь встроенный CSS в начале страницы, например:

<style type="text/css">
    @media only screen and (min-width: 680px) {
        .hero-image { background-image: url(../images/image.jpg); }
    }
</style>

Во-первых, могу ли я использовать медиа-запросы в встроенном CSS?

Во-вторых, это позволит избежать загрузки изображения на мобильные телефоны?

В-третьих, есть ли лучший способ?

Спасибо

Ответ 1

Да, вы можете использовать медиа-запросы в теге <style>. Изображение загружается только в том случае, если CSS требует его, поэтому, если ничего не соответствует селектору, он не будет загружать изображение.

Возможно, было бы лучше включить медиа-запрос в ваш внешний файл CSS. Там нет причин включать его inlline.

Ответ 2

Нет, похоже, что вы не можете вставлять теги @media:

Пожалуйста, обратитесь к этому: Возможно ли установить правила CSS @media?

Ответ 3

Возможно, вам повезет с двухступенчатым медиа-запросом, который начинается в CSS, но заканчивается в jQuery. Обозначьте свои div с идентификатором, чтобы jQuery мог их найти. Процесс подробно объясняется здесь: http://www.fourfront.us/blog/jquery-window-width-and-media-queries