Проблема
Ні, медіа-запити не можна використовувати таким чином
<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>