Проблема
Нет, Медиа-запросы не могут использоваться таким образом
<span style="@media (...) { ... }"></span>
Решение
Но еслиЕсли вы хотите, чтобы конкретное поведение можно было использовать на лету И реагировать, вы можете использовать разметку style, а не атрибут.
ei
<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>