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