Problem
Nein, Media Queries können nicht auf diese Weise verwendet werden.
<span style="@media (...) { ... }"></span>
Lösung
Wenn Sie jedoch ein bestimmtes Verhalten zur Verfügung stellen wollen, das on the fly verwendbar UND reaktionsfähig ist, können Sie die style Markup und nicht das Attribut.
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>
Sehen Sie sich den Code live auf CodePen an
In meinem Blog zum Beispiel, injiziere ich eine <style> Markup in <head> kurz nach <link> Deklaration für CSS und es ist der Inhalt einer Textarea zur Verfügung gestellt neben der realen Inhalt Textarea für die Schaffung extra-Klasse on the fly, wenn ich schrieb ein artitle.
Anmerkung: Die scoped Attribut ist ein Teil der HTML5-Spezifikation. Wenn Sie es nicht verwenden, wird der Validator Sie tadeln, aber die Browser unterstützen derzeit nicht den eigentlichen Zweck: den Inhalt von "scoped". <style> nur auf das unmittelbare Elternelement und die untergeordneten Elemente dieses Elements. Scoped ist nicht obligatorisch, wenn das <style> Element ist in <head> Aufschlag.
UPDATE: Ich empfehle, die Regeln immer zuerst auf mobilem Weg zu verwenden, so dass der vorherige Code sein sollte:
<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>
