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

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

например:

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

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

11 202
html css css3 media-queries

11 ответов:

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

значение атрибута style должно соответствовать синтаксису содержимого CSS декларации блок

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

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

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

@media (max-width: 300px) {
    span { background-image: url(particular_ad_small.png); }
}
201

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

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

решение

но если вы хотите обеспечить определенное поведение, используемое на лету и отзывчивое, вы можете использовать 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, и это содержит содержимое textarea, предоставленное рядом с реальным содержанием textarea для создания экстра-класса на лету, когда я написал artitle.

Примечание:scoped атрибут является частью спецификации HTML5. Если вы не используете его, валидатор будет обвинять вас, но браузеры в настоящее время не поддерживают реальную цель : scoped содержание <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>
94

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

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

13

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

 <span class="hidden-xs" style="background: url(particular_ad.png)"></span>
 <span class="visible-xs" style="background: url(particular_ad_small.png)"></span>
6

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

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

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

4

Я попытался проверить это, и это, кажется, не работает, но мне любопытно, почему 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>

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

3

встроенные медиа-запросы можно использовать что-то вроде точка останова для Сасс

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

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

  1. мысли о медиа-запросах для элементов
  2. СМИ Запросы-это хак
  3. Медиа Запросы Не Ответ: Элемент Запроса Polyfill
  4. если еще блоки
2

Эй я только что написал это.

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

наслаждайтесь.

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);">
2

Да, вы можете написать медиа-запрос в 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>
2

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

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

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
0