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

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

Например:

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

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

Ответы

Ответ 1

Нет, @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); }
}

Ответ 2

проблема

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

<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, и она содержит содержимое текстовой области, предоставляемой рядом с текстовой областью реального содержимого, для создания дополнительного класса на лету, когда я писал статья.

Примечание: атрибут 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>

Ответ 3

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

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

Ответ 4

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

Ответ 5

Если вы используете 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>

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 9

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

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

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

Ответ 10

Вы можете использовать функцию 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);">

Ответ 11

если вы добавите правило в файл 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>

Ответ 12

да, вы можете сделать с JavaScript с помощью window.matchMedia

  1. рабочий стол для текста красного цвета

  2. планшет для текста зеленого цвета

  3. мобильный телефон для текста синего цвета

//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width:  768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices



isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);

 // Attach listener function on state changes

function isat_find_device_mobile(mob)
{
  
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";

// isat mobile style here

}

function isat_find_device_desktops(des)
{

// isat mobile style here

var daynight=document.getElementById("daynight");
daynight.style.color="red";
 
//  isat mobile style here
}

function isat_find_device_tablets(tab)
{

// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";

//  isat mobile style here
}


//isat_style_media_query_for_desktop_mobile_tablets
    <div id="daynight">tricky style for mobile,desktop and tablet</div>