Lädt...

CSS Media Queries (Medienabfragen)

Responsives Design hat die Haltung gesetzt: ein HTML-Baum, Viewport-Meta, fluides Gerüst, relative Einheiten. Media Queries sind der Schalter — CSS-Blöcke, die nur greifen, wenn eine Bedingung passt (meist Viewport-Breite). Diese Lektion lehrt Syntax und ruhige Gewohnheiten; Responsive Images und Breakpoints vertiefen das Werkzeug danach.

Werkzeugkiste Media Queries

📊 Media Queries auf einen Blick

Baustein Alltagsaufgabe
@media Öffnet einen bedingten CSS-Block
Media-Feature (min-width, max-width, …) Der Test, den der Browser auswertet
and Alle gelisteten Features müssen passen
Kommagetrennte Queries Logisches oder — jede passende Liste gilt
Regelwerk in { } Styles nur, solange die Query zutrifft
Media-Typ (screen, print) Optionaler Filter für das Ausgabemedium

Ohne Queries gilt jede Regel „immer“. Mit ihnen behalten Sie eine stabile Basis (aus der vorherigen Lektion) und schichten Änderungen — breitere Spalten, größere Schrift, andere Navigation — nur wenn der Viewport das trägt.

Anatomie von @media

Klassisches Muster: Feature in Klammern, danach ein geschweifter Block mit normalen Deklarationen. Nutzen Sie für Breiten möglichst rem oder em — sie skalieren mit Root-/Typo-Einstellungen besser als harte Gerätepixel-Listen.

Einfache min-width Media Query

css 
.nav {
display: block;
}

@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}

Mobile-first mit min-width

Schreiben Sie das schmale Layout in die Basis-Stylesheet. Mit @media (min-width: …) fügen Sie Verbesserungen hinzu, wenn der Viewport wächst. Jeder Schritt soll eine klare Schicht ändern — Abstand, Spalten oder Navigation — nicht die ganze Seite bei jedem Schritt neu schreiben.

Mobile-first-Erweiterung

css 
.hero {
padding: 1rem;
font-size: 1.125rem;
}

@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}

@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

Desktop-first mit max-width

Ist die Basis ein breites Layout, verengt @media (max-width: …) Styles unter einer Schwelle — Spalten stapeln, Padding verkleinern, Chrome vereinfachen. Bleiben Sie im Projekt konsistent: springen Sie nicht grundlos zwischen reinem min-width- und reinem max-width-Stapel.

Desktop-first-Verengung

css 
.sidebar {
width: 16rem;
float: left;
}

@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}

Features mit and kombinieren

Verketten Sie Features so, dass alle passen müssen. Nützlich für Bereiche (min und max zusammen) oder Breite plus ein weiteres Feature. Ein Komma zwischen ganzen @media-Listen bedeutet oder.

Bereich mit and

css 
.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}

Jenseits der Breite — Druck (und ruhige Extras)

Breite ist das Alltagswerkzeug. Media-Typen wie print blenden Chrome für Papier aus. Preference-Features (z. B. prefers-reduced-motion) gehören zur Accessibility-Politur — hier sparsam einsetzen; Breakpoints ordnet die Strategie, Accessibility behandelt Bewegung später.

Einfache Print-Styles

css 
@media print {
.site-nav,
.ad-slot {
display: none;
}

body {
color: #000;
background: #fff;
}
}

Eine ruhige Breakpoint-Gewohnheit

Wählen Sie eine kurze Liste benannter Breiten, die zu Ihren Layout-Stresspunkten passen — nicht zu jedem Handymodell. Dokumentieren Sie sie (z. B. „Nav klappt unter 48rem“). Fluide Basis + wenige Queries schlagen einen Wald aus Geräte-Einzelfällen. Nächste Lektionen: Bilder und ein vollerer Breakpoint-Plan.

Selbst ausprobieren

  1. Nehmen Sie eine gestapelte Nav und fügen Sie eine @media (min-width: …) hinzu, die sie auf flex umstellt.
  2. Schreiben Sie dieselbe Idee mit desktop-first max-width-Verengung — achten Sie auf den Unterschied in der Basis.
  3. Fügen Sie eine Bereichs-Query mit min-width und max-width nur für ein Zwei-Spalten-Band hinzu.
  4. Verstecken Sie ein dekoratives Banner mit @media print.
  5. Schreiben Sie drei benannte Breakpoints für Ihre Übungsseite — Liste kurz halten.

Häufige Fehler

  • Eine eigene Query pro Gerätemarke statt Layout-Stresspunkte
  • Fehlende schließende }, sodass späteres CSS in der Query verschwindet
  • min-width- und max-width-Stapel wahllos mischen, bis die Cascade mit sich selbst kämpft
  • Nur auf Queries setzen und fluide Container sowie relative Einheiten aus Responsives Design ignorieren
  • Hier einen langen Breakpoint-Katalog abladen — die Handwerkskunst geht in Breakpoints weiter; Bilder in Responsive Images

Zusammenfassung

  • Media Queries umschließen CSS, damit es nur bei passenden Bedingungen gilt
  • min-width erweitert nach oben (mobile-first); max-width verengt nach unten (desktop-first)
  • and verlangt alle Features; Kommas zwischen Queries wirken als oder
  • Wenige, benannte Breakpoints an echte Layout-Bedürfnisse binden
  • Als Nächstes: Responsive Images — Medien, die skalieren, ohne die Spalte zu sprengen

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 55 von 60
Css Tutorial