Можно ли встроить правила CSS @media?

205

Мне нужно динамически загружать изображения баннера в приложение HTML5 и хотел бы, чтобы несколько разных версий соответствовали ширине экрана. Я не могу правильно определить ширину экрана телефона, поэтому единственный способ сделать это - добавить фоновые изображения div и использовать @media для определения ширины экрана и отображения правильного изображения.

Например:

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

Возможно ли это, или у кого-нибудь есть другие предложения?

  • 0
    Разочарованы ответами? Смотрите этот комментарий . Это может помочь.
Теги:
media-queries

11 ответов

227
Лучший ответ

Нет, @media правила и медиа-запросы не могут существовать в встроенных атрибутах стиля, поскольку они могут содержать только объявления property: value. Как спецификация помещает его:

Значение атрибута style должно соответствовать синтаксису содержимого блока объявления

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

Селектор span dummy будет выглядеть так, но если вы нацеливаете очень специфический элемент, вам понадобится более конкретный селектор:

span { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
Поделиться
  • 49
    Вы также можете просто вставить <style> в свой HTML. Это необходимый подход для случая, когда background-image динамически извлекается из базы данных. Очевидно, что во внешней таблице стилей это не подходящее место для этого.
  • 1
    @Jakobud: Да, не имеет значения, где находится таблица стилей, но дело в том, что вы можете делать это только в CSS, а не в атрибуте встроенного стиля.
Показать ещё 4 комментария
103

проблема

Нет, медиазапросы не могут быть использованы таким образом

<span style="@media (...) { ... }"></span>

РЕДАКТИРОВАТЬ: значение атрибута стиля должно соответствовать синтаксису содержимого блока объявления CSS

Решение

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

й

<style scoped>
.on-the-fly-behavior {
    background-image: url('particular_ad.png'); 
}
@media (max-width: 300px) {
    .on-the-fly-behavior {
        background-image: url('particular_ad_small.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>

Смотрите код, работающий вживую на CodePen

Например, в моем блоге я вставляю разметку <style> в <head> сразу после объявления <link> для CSS, и она содержит содержимое текстовой области, предоставленной рядом с текстовой областью реального содержимого, для создания дополнительного класса на лету, когда я писал статья.

Примечание: атрибут scoped является частью спецификации HTML5. Если вы не используете его, валидатор обвинит вас, но браузеры в настоящее время не поддерживают реальную цель: ограничивают содержимое <style> только для непосредственно родительского элемента и дочерних элементов этого элемента. Область действия не обязательна, если элемент <style> находится в разметке <head>.

ОБНОВЛЕНИЕ: Я советую всегда использовать правила для мобильных устройств, поэтому предыдущий код должен быть:

<style scoped>
/* 0 to 299 */
.on-the-fly-behavior {
    background-image: url('particular_ad_small.png'); 
}
/* 300 to X */
@media (min-width: 300px) { /* or 301 if you want really the same as previously.  */
    .on-the-fly-behavior {   
        background-image: url('particular_ad.png');
    }
}
</style>
<span class="on-the-fly-behavior"></span>
Поделиться
  • 8
    Это лучший ответ, чем принятый, поскольку он позволяет динамически изменять background-image при загрузке страницы.
  • 0
    Мне нравится этот ответ, слишком плохая поддержка для области в настоящее время очень ограничена.
Показать ещё 5 комментариев
13

В строковых стилях в настоящее время не может содержаться ничего, кроме объявлений (пары property: value).

Вы можете использовать элементы style с соответствующими атрибутами media в разделе head вашего документа.

Поделиться
8

Да, вы можете написать медиа-запрос в inline-css, если вы используете тег изображения. Для разных размеров устройства вы можете получить разные изображения.

<picture>
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Поделиться
6

Если вы используете Bootstrap Responsive Utilities или аналогичную альтернативу, которая позволяет скрыть/показать divs в зависимости от точек останова, возможно, будет возможно использовать несколько элементов и показать самое подходящее. то есть.

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
Поделиться
  • 2
    Красивый обходной путь - скрыть div, показать div на основе медиазапроса - единственный недостаток, который я вижу, это то, что он по-прежнему будет загружать оба изображения, поэтому вы будете отправлять оба на клиент.
  • 3
    Дублированный контент не очень хорошая вещь для обслуживания или SEO.
Показать ещё 1 комментарий
4

Эй, я только что написал его.

Теперь вы можете использовать <div style="color: red; @media (max-width: 200px) { color: green }"> или так.

Enjoy.

Поделиться
  • 0
    Я проголосовал за это, так как это казалось тогда, но это не так. #печальный
  • 0
    @ honk31 это мир только для одного правила
4

Запросы к медиа в стиле-Атрибуты теперь невозможны. Но если вы должны установить это динамически с помощью Javascript. Вы также можете вставить это правило через JS.

document.styleSheets[0].insertRule("@media only screen and (max-width : 300px) { span { background-image:particular_ad_small.png; } }","");

Это как если бы стиль был в таблице стилей. Поэтому имейте в виду специфику.

Поделиться
  • 0
    есть идеи когда это будет возможно?
  • 1
    Я не думаю, что это будет. Но я не в курсе всего, что делают рабочие группы.
3

Я попытался проверить это, и он, похоже, не работал, но мне любопытно, почему Apple использует его. Я был на https://linkmaker.itunes.apple.com/us/ и заметил в сгенерированном коде, который он предоставляет, если вы выберете переключатель "Большая кнопка", они используют встроенный медиа-запрос.

<a href="#" 
    target="itunes_store" 
    style="
        display:inline-block;
        overflow:hidden;
        background:url(#.png) no-repeat;
        width:135px;
        height:40px;
        @media only screen{
            background-image:url(#);
        }
"></a>

Примечание: добавлены разрывы строк для удобочитаемости, исходный сгенерированный код минимизирован

Поделиться
  • 2
    Я хотел бы знать, почему / как Apple также использует это
  • 0
    Код по кавычкам больше не существует по данной ссылке (по крайней мере для меня; возможно, я получаю другой контент из-за того, что нахожусь за пределами США). Кроме того, это действительно больше похоже на отдельный вопрос, чем на ответ.
Показать ещё 1 комментарий
2

Вы можете использовать функцию image-set()

<div style="
  background-image: url(icon1x.png);
  background-image: -webkit-image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);  
  background-image: image-set(  
    url(icon1x.png) 1x,  
    url(icon2x.png) 2x);">
Поделиться
  • 1
    Обратите внимание, что это поддерживается только в браузерах на основе Webkit .
  • 0
    Это не работает в зависимости от размера (как указано в вопросе), но в зависимости от коэффициента масштабирования, поэтому вы можете получить изображение для маленьких экранов на экране 27 “2560x1440. Это может быть то, что вы хотите, а может и нет.
2

Запросы встроенных медиа можно использовать, используя Breakpoint для Sass

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

В связи с запросами встроенных медиа - идея "элементарных запросов", несколько интересных заметок:

Поделиться
0

если вы добавите правило в файл print.css, вам не нужно использовать @media.

Я включил его в smarty foreach, который я использовал, чтобы дать некоторым элементам цвет фона.

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню