Проблема
Нет, медиа-запросы нельзя использовать таким образом
<span style="@media (...) { ... }"></span>
Решение
Но если вы хотите обеспечить определенное поведение, которое можно использовать «на лету» И реагировать, вы можете использовать разметку style, а не атрибут.
e.i.
<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> только непосредственно родительским элементом и дочерними элементами этого элемента. Scoped не является обязательным, если элемент <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>
person
Bruno J. S. Lesieur
schedule
19.02.2015
