Problem
Nein, Medienabfragen können auf diese Weise nicht verwendet werden
<span style="@media (...) { ... }"></span>
Lösung
Wenn Sie jedoch ein bestimmtes Verhalten bereitstellen möchten, das im laufenden Betrieb verwendet werden kann UND reagiert, können Sie das styleMarkup und nicht das Attribut verwenden.
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>
Sehen Sie sich den Code live in CodePen an
In meinem Blog füge ich beispielsweise direkt nach der Deklaration für CSS ein <style>Markup ein , das den Inhalt eines Textbereichs enthält, der neben dem Textbereich für echten Inhalt bereitgestellt wird, um beim Schreiben eines Artikels im Handumdrehen eine zusätzliche Klasse zu erstellen.<head><link>
Hinweis: Das scopedAttribut ist Teil der HTML5-Spezifikation. Wenn Sie es nicht verwenden, wird der Validator Sie beschuldigen, aber Browser unterstützen derzeit nicht den eigentlichen Zweck: den Inhalt <style>nur auf das unmittelbar übergeordnete Element und die untergeordneten Elemente dieses Elements zu beschränken. Der Gültigkeitsbereich ist nicht obligatorisch, wenn sich das <style>Element im <head>Markup befindet.
UPDATE: Ich rate, Regeln immer zuerst auf dem Handy zu verwenden, daher sollte der vorherige Code lauten:
<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>