Mehrere Media Queries kombinieren
Verwenden Sie die Operatoren and, or und not, um Media Features zu komplexen Abfragen zu kombinieren.
Mehrere Media Queries kombinieren ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Der Operator and
Das Schlüsselwort and erfordert, dass alle Bedingungen gleichzeitig erfüllt sind. Es ist nützlich, um bestimmte Gerätegrößen und -typen gemeinsam anzusprechen.
<div class="box">and operator demo</div>
Bereich mit and
Durch die Kombination von min-width und max-width mit and wird ein bestimmter Viewport-Breitenbereich angesprochen (Stile nur für Tablets):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
Komma als OR
Durch Kommas getrennte Abfragen funktionieren wie OR – Stile werden angewendet, wenn eine beliebige Abfrage zutrifft:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
Der Operator not
not negiert eine vollständige Media Query. Sie müssen ihn sorgfältig verwenden – er gilt für den gesamten Abfrageausdruck und nicht nur für die erste Bedingung.
<div class="doc">not operator demo</div>
not mit Klammern (modern)
Moderne Media Queries der Stufe 4 erlauben not() als Funktion für einzelne Merkmale:
<div class="panel">not() function demo</div>
Das Schlüsselwort only (veraltet)
Das Schlüsselwort only wurde verwendet, um Media Queries vor älteren Browsern zu verbergen, die keine Media Features unterstützten. Moderne Browser ignorieren es, es ist jedoch unschädlich.
<div class="box">only keyword demo</div>
Media Queries verschachteln (CSS Nesting)
Mit nativem CSS Nesting können Media Queries innerhalb von Selektorblöcken geschrieben werden:
<div class="card">Nested media query demo</div>
Kombination aus Mobilgeräten und hoher Pixeldichte
Sprechen Sie gezielt Mobilgeräte an (klein und mit hoher Pixeldichte):
<div class="icon"></div>
Druck + Farbe
Mehrere Media Features für Druckstile, die nur auf Farbdrucker angewendet werden:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
Media Query in @import
Media Queries können zum Zeitpunkt des Imports angewendet werden, um vollständige Stylesheets bedingt zu laden (dies blockiert jedoch das Rendern und sollte sparsam eingesetzt werden):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Logische Eigenschaften in komplexen Abfragen
Als Faustregel gilt: Einfachere Abfragen sind leichter zu warten. Vermeiden Sie es, zu viele Bedingungen zu verketten. Wenn eine Abfrage komplex wird, sollten Sie den CSS-Ansatz neu strukturieren, statt die Abfrage weiter auszubauen.
Kurzer Wissenstest
Welche Media Query wendet Stile an, wenn der Viewport mindestens 600px breit ist ODER das Gerät im Querformat verwendet wird?
Zusammenfassung
and erfordert, dass alle Bedingungen wahr sind. Kommas fungieren zwischen Abfragen als OR. not negiert eine vollständige Abfrage. Kombinieren Sie min-width und max-width, um Bereiche anzusprechen. Modernes CSS unterstützt die Verschachtelung von Media Queries innerhalb von Selektorblöcken sowie die Bereichssyntax für übersichtlichere Ausdrücke.
Lerne CSS mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 40
- Lektionen
- 159
Häufig gestellte Fragen
Ist die Lektion „Mehrere Media Queries kombinieren“ kostenlos?
Ja — der vollständige Text von „Mehrere Media Queries kombinieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Mehrere Media Queries kombinieren“?
Verwenden Sie die Operatoren and, or und not, um Media Features zu komplexen Abfragen zu kombinieren. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Mehrere Media Queries kombinieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Syntax und gängige Breakpoints
- Abfragen von Breite, Höhe und Ausrichtung
- Prefers-Color-Scheme und Prefers-Reduced-Motion
- Mehrere Media Queries kombinieren