CSS @media: Fortgeschrittene Media-Query-Muster für ein wirklich responsives Web

In der dynamischen Landschaft der modernen Webentwicklung ist es nicht nur eine bewährte Vorgehensweise, sondern eine Notwendigkeit, Erlebnisse zu schaffen, die sich nahtlos an eine ständig wachsende Vielfalt von Geräten und Benutzerkontexten anpassen. Von hochauflösenden Desktop-Monitoren bis hin zu kompakten Smartphones, von Benutzern in belebten Stadtzentren mit Hochgeschwindigkeitsinternet bis zu jenen in abgelegenen Gebieten mit begrenzter Bandbreite und von Personen, die dunkle Designs bevorzugen, bis zu denen, die reduzierte Bewegung benötigen – das Web muss flexibel sein. An dieser Stelle gehen die CSS @media-Regeln, der Eckpfeiler des responsiven Designs, über ihre grundlegende Anwendung hinaus und werden zu leistungsstarken Werkzeugen für fortgeschrittene Anpassungsfähigkeit.

Während viele Entwickler mit der Verwendung von @media für einfache Breakpoint-Anpassungen vertraut sind, liegt die wahre Stärke in den fortgeschrittenen Mustern, logischen Operatoren und der Fähigkeit, auf Benutzer- und Umgebungseinstellungen zuzugreifen. Dieser umfassende Leitfaden führt Sie über die Grundlagen hinaus und erkundet die komplexe Welt der fortgeschrittenen Media-Query-Funktionen, mit denen Sie wirklich widerstandsfähige, inklusive und global zugängliche Webanwendungen erstellen können.

Wir werden uns mit Techniken befassen, die es Ihren Designs ermöglichen, nicht nur auf die Bildschirmgröße, sondern auch auf die Gerätefähigkeiten, die Barrierefreiheitseinstellungen der Benutzer und sogar auf die Umgebung zu reagieren, um jedem Benutzer überall ein überlegenes Erlebnis zu gewährleisten.

Die Grundlage: Eine kurze Wiederholung der grundlegenden @media-Syntax

Bevor wir uns mit fortgeschrittenen Mustern befassen, wollen wir kurz die Grundlage wiederholen. Eine einfache Media Query besteht aus einem optionalen Medientyp (wie screen, print, all) und einem oder mehreren Medienmerkmalen (wie min-width, orientation). Die Stile innerhalb des @media-Blocks werden nur angewendet, wenn die Bedingungen erfüllt sind.

            /* Einfaches Beispiel: Stile werden nur auf Bildschirmen angewendet, die breiter als 768px sind */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Stile werden nur beim Drucken der Seite angewendet */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Dieses grundlegende Verständnis ist entscheidend, da fortgeschrittene Muster direkt darauf aufbauen.

Jenseits von Breakpoints: Medienmerkmale verstehen

Während width und height die am häufigsten verwendeten Medienmerkmale sind, ermöglicht eine Vielzahl anderer Merkmale weitaus differenziertere Designentscheidungen. Das Verständnis dieser Fähigkeiten ist der Schlüssel, um über generische Mobile-/Tablet-/Desktop-Layouts hinauszugehen.

Viewport-basierte Merkmale (Die üblichen Verdächtigen und mehr)

Diese Merkmale beziehen sich auf die Abmessungen und Eigenschaften des Browser-Viewports, nicht auf den Bildschirm des physischen Geräts.

• width, height, min-width, max-width, min-height, max-height: Dies sind die grundlegenden Werkzeuge des responsiven Designs. Sie ermöglichen es Ihnen, Breakpoints basierend auf dem sichtbaren Bereich des Browsers zu definieren. Beispielsweise könnten Sie ein einspaltiges Layout in ein mehrspaltiges Layout ändern, wenn min-width einen bestimmten Pixelwert erreicht.

            /* Ein zweispaltiges Layout auf breiteren Bildschirmen anwenden */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Diese Merkmale ermöglichen es Ihnen, Designs basierend auf dem Verhältnis der Breite zur Höhe des Viewports gezielt anzupassen. Dies ist unglaublich nützlich, um Inhalte für verschiedene Bildschirmformen zu optimieren, von ultrabreiten Monitoren bis zu hohen Smartphones.

            /* Hero-Bild für ultrabreite Bildschirme optimieren (z. B. 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Dieses Merkmal erkennt, ob sich der Viewport im portrait-Modus (Höhe ist größer oder gleich der Breite) oder im landscape-Modus (Breite ist größer als die Höhe) befindet. Dies ist besonders wichtig für mobile und Tablet-Erlebnisse.

            /* Layout für die Querformatausrichtung auf Tablets anpassen */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Gerätebasierte Merkmale (seltener, aber nützlich)

Diese Merkmale beziehen sich auf die Eigenschaften des physischen Ausgabegeräts. Während viewport-basierte Abfragen für das Inhaltslayout im Allgemeinen bevorzugt werden, haben geräte-basierte Merkmale spezifische Nischen.

• device-width, device-height (und ihre min/max-Varianten): Historisch wurden diese verwendet, um auf bestimmte Geräteauflösungen abzuzielen. Aufgrund variabler Browserfenstergrößen auf Desktops und Tablets sowie unterschiedlicher Pixeldichten kann die Verwendung dieser Merkmale für das allgemeine Layout jedoch unzuverlässig sein. Die viewport-Abmessungen sind fast immer besser geeignet. Sie könnten in sehr speziellen Szenarien noch in Betracht gezogen werden, wie z. B. bei Anwendungen, die speziell für Bildschirme mit fester Größe wie Kiosksysteme entwickelt wurden, aber dies ist in der typischen Webentwicklung selten.
• resolution: Dieses Merkmal ermöglicht es Ihnen, Displays basierend auf ihrer Pixeldichte (DPI oder DPX – dots per pixel) gezielt anzusprechen. Dies ist entscheidend, um hochwertige Bilder an „Retina“- oder High-DPI-Bildschirme auszuliefern, ohne unnötig große Dateien an Standard-Displays zu senden.

            /* Ein Hintergrundbild mit höherer Auflösung für High-DPI-Bildschirme bereitstellen */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Beachten Sie die Verwendung von sowohl dpi als auch dppx, um unterschiedliche Browser-Interpretationen abzudecken und Ihren Code zukunftssicher zu machen. dppx (dots per pixel unit) wird im Allgemeinen bevorzugt, da es geräteunabhängiger ist.

Logische Operatoren: Bedingungen präzise kombinieren

Um wirklich anspruchsvolle Media Queries zu erstellen, müssen Sie mehrere Bedingungen mithilfe von logischen Operatoren kombinieren. Diese ermöglichen es Ihnen, genau festzulegen, wann eine Reihe von Stilen angewendet werden soll.

`and`-Operator: Alle Bedingungen müssen wahr sein

Das Schlüsselwort and kombiniert mehrere Medienmerkmale oder Medientypen und Merkmale. Alle angegebenen Bedingungen müssen als wahr ausgewertet werden, damit die Stile angewendet werden.

            /* Stile nur auf Bildschirmen anwenden, die zwischen 768px und 1024px breit sind */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Dies ist äußerst nützlich, um bestimmte Gerätebereiche wie Tablets im Hochformat gezielt anzusprechen oder um hochgradig angepasste Layouts für sehr spezifische Bildschirmabmessungen zu erstellen.

`or`-Operator (`, ` komma-getrennt): Jede Bedingung kann wahr sein

In CSS-@media-Regeln fungiert ein Komma (`,`) als logisches ODER. Wenn eine der durch Kommas getrennten Media Queries als wahr ausgewertet wird, werden die zugehörigen Stile angewendet.

            /* Stile gelten, wenn der Bildschirm breiter als 1200px ist ODER wenn sich das Gerät im Querformat befindet (unabhängig von der Breite) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Stile gelten für Druckmedien ODER für Bildschirme mit einer Mindestauflösung */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Für besseres Druck-/Hochauflösungs-Rendering */
  }
}

            

              
                Copy
              
            
          

Diese leistungsstarke Funktion ermöglicht es Ihnen, Stile zu gruppieren, die unter mehreren unterschiedlichen Bedingungen gelten sollen, was zu prägnanteren und lesbareren Stylesheets führt.

`not`-Operator: Eine Bedingung umkehren

Das Schlüsselwort not negiert eine gesamte Media Query, was bedeutet, dass die Stile angewendet werden, wenn die angegebene Bedingung nicht erfüllt ist.

            /* Stile auf alle Medientypen AUSSER Druck anwenden */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Stile anwenden, wenn es sich NICHT um einen Bildschirm mit einer Mindestbreite von 768px handelt (d. h. für Druck oder Bildschirme, die kleiner als 768px sind) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

Der not-Operator kann knifflig sein und sollte mit Bedacht eingesetzt werden. Stellen Sie sicher, dass Sie den Umfang dessen verstehen, was negiert wird. Zum Beispiel bedeutet @media not screen and (min-width: 768px) „nicht ein Bildschirm UND Mindestbreite 768px“, was logisch äquivalent ist zu „wenn es kein Bildschirm ist ODER wenn es ein Bildschirm ist UND die maximale Breite weniger als 768px beträgt“. Es ist oft klarer, max-width anstelle von not min-width zu verwenden.

`only`-Schlüsselwort: Gewährleistung der Abwärtskompatibilität (Historischer Kontext)

Das Schlüsselwort only wurde eingeführt, um Stylesheets vor älteren Browsern zu verbergen, die Media Queries nicht vollständig unterstützten. Wenn ein älterer Browser auf @media only screen stieß, ignorierte er die Regel normalerweise, weil er only nicht als gültigen Medientyp erkannte. Moderne Browser parsen es korrekt. Angesichts der heute weit verbreiteten Browser-Unterstützung für Media Queries ist only für die Neuentwicklung weitgehend überflüssig, kann aber in älteren Codebasen vorkommen.

            /* Beispiel: Stile nur auf Bildschirmen angewendet, vor sehr alten Browsern verborgen */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Medienmerkmale für Benutzereinstellungen: Inklusivität und Barrierefreiheit fördern

Dies sind vielleicht die aufregendsten und wirkungsvollsten fortgeschrittenen Media-Query-Funktionen, da sie Entwicklern ermöglichen, direkt auf die Einstellungen des Betriebssystems oder Browsers der Benutzer zu reagieren, was zu deutlich zugänglicheren und benutzerfreundlicheren Erlebnissen führt. Dies ist besonders wichtig für ein globales Publikum mit unterschiedlichen Bedürfnissen und Umgebungen.

prefers-color-scheme: Heller und dunkler Modus

Dieses Merkmal erkennt, ob der Benutzer ein helles oder dunkles Farbschema für sein Betriebssystem oder seinen User-Agent angefordert hat. Die Implementierung eines dunklen Modus verbessert die Barrierefreiheit und den Komfort erheblich, insbesondere in Umgebungen mit wenig Licht oder für Benutzer mit Lichtempfindlichkeit.

• no-preference: Keine Präferenz vom Benutzer angegeben.
• light: Benutzer bevorzugt ein helles Schema.
• dark: Benutzer bevorzugt ein dunkles Schema.

            /* Standard (helles) Thema */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Für robustere Implementierungen des dunklen Modus sind CSS Custom Properties (Variablen) von unschätzbarem Wert, da sie es Ihnen ermöglichen, Farbpaletten dynamisch zu definieren.

prefers-reduced-motion: Den Benutzerkomfort respektieren

Animationen und Übergänge können das Benutzererlebnis verbessern, aber für einige Personen (z. B. solche mit vestibulären Störungen, ADHS oder einfach diejenigen, die Bewegung als störend empfinden) können sie Unbehagen oder sogar Übelkeit verursachen. Dieses Merkmal erkennt, ob der Benutzer minimale, nicht wesentliche Animationen angefordert hat.

• no-preference: Keine Präferenz angegeben.
• reduce: Benutzer bevorzugt reduzierte Bewegung.

            /* Standardanimation */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Sanftes Scrollen deaktivieren */
  }
}

            

              
                Copy
              
            
          

Es ist eine bewährte Vorgehensweise für die Barrierefreiheit, immer eine Alternative mit reduzierter Bewegung anzubieten. Dies trägt dazu bei, ein Web zu schaffen, das für jeden nutzbar und komfortabel ist, unabhängig von individuellen Empfindlichkeiten.

prefers-contrast: Visuellen Kontrast anpassen

Dieses Merkmal erkennt, ob der Benutzer einen bestimmten Kontrastlevel für sein Betriebssystem angefordert hat. Dies ist für Benutzer mit Sehschwäche oder bestimmten Farbwahrnehmungsstörungen von großem Vorteil.

• no-preference: Keine Präferenz.
• less: Benutzer bevorzugt weniger Kontrast.
• more: Benutzer bevorzugt mehr Kontrast.
• custom: Benutzer hat eine benutzerdefinierte Kontrasteinstellung (seltener).

            /* Stile für erhöhten Kontrast */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Indem Sie Stile für unterschiedliche Kontrastpräferenzen bereitstellen, tragen Sie aktiv zu einer zugänglicheren und inklusiveren digitalen Umgebung für Benutzer weltweit bei.

forced-colors: Umgang mit systemerzwungenen Farbpaletten

Wenn ein Betriebssystem (wie der Hochkontrastmodus von Windows) Anwendungen eine bestimmte Farbpalette aufzwingt, kann dies manchmal benutzerdefinierte Webdesigns überschreiben oder beschädigen. Das Medienmerkmal forced-colors hilft Entwicklern, sich an dieses Szenario anzupassen, indem es ihnen ermöglicht, Stile bereitzustellen, die innerhalb der erzwungenen Farbbeschränkungen gut funktionieren.

• active: Der User-Agent hat einen aktiven Modus für erzwungene Farben.
• none: Kein Modus für erzwungene Farben ist aktiv.

            /* Anpassungen für Benutzer des Hochkontrastmodus */
@media (forced-colors: active) {
  /* Sicherstellen, dass Elemente sichtbare Ränder haben */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Hintergrundbilder entfernen, die Text verdecken könnten */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Sie sichtbar machen */
  }
}

            

              
                Copy
              
            
          

Dieses Merkmal ist entscheidend, um die Einhaltung von Barrierefreiheitsstandards (wie WCAG) zu gewährleisten und eine funktionale Erfahrung für Benutzer zu bieten, die auf diese systemweiten Anpassungen angewiesen sind.

Umgebungsbezogene Medienmerkmale: Anpassung an Gerätefähigkeiten

Diese Medienmerkmale ermöglichen es Ihnen, Erlebnisse basierend darauf anzupassen, wie ein Benutzer mit seinem Gerät interagiert, z. B. die Art des von ihm verwendeten Zeigegeräts oder die Fähigkeiten seines Displays.

hover und any-hover: Unterscheidung von Zeigegeräten

Diese Merkmale helfen bei der Unterscheidung zwischen Geräten, die Hover unterstützen (z. B. Desktops mit einer Maus), und solchen, die hauptsächlich Touch verwenden (z. B. Smartphones, Tablets). Dies ist entscheidend, um frustrierende UX-Muster auf reinen Touch-Geräten zu vermeiden.

• hover: Bezieht sich auf den primären Eingabemechanismus.
• any-hover: Bezieht sich auf jeden verfügbaren Eingabemechanismus.
• Werte: none (keine Hover-Unterstützung), hover (Hover-Unterstützung).

            /* Tooltips nur auf Geräten mit Hover-Fähigkeit anzeigen */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Auf Touch-Geräten könnten Tooltips durch Fokus ausgelöst oder gar nicht angezeigt werden */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Die Verwendung von any-hover ist oft robuster, da ein Gerät sowohl Touch- als auch Mauseingabe haben kann (z. B. ein 2-in-1-Laptop). Wenn any-hover hover ist, unterstützt mindestens eine Eingabemethode Hover. Wenn any-hover none ist, unterstützt keine Eingabemethode Hover.

pointer und any-pointer: Unterscheidung der Zeigergenauigkeit

Diese Merkmale erkennen die Genauigkeit des primären (pointer) oder eines beliebigen verfügbaren (any-pointer) Zeigegeräts.

• none: Kein Zeigegerät.
• coarse: Ungenaues Zeigegerät (z. B. Finger auf einem Touchscreen).
• fine: Genaues Zeigegerät (z. B. Maus, Stift).

            /* Tipp-Zielgröße für grobe Zeiger erhöhen */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Padding für feine Zeiger reduzieren */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Dies ist entscheidend für die Gestaltung von berührungsfreundlichen Oberflächen, bei denen Tipp-Ziele für die Fingereingabe ausreichend groß sein müssen, während gleichzeitig ein kompakteres Design möglich ist, wenn eine präzise Mausinteraktion verfügbar ist. Dies wirkt sich direkt auf die Benutzerfreundlichkeit über ein Spektrum von Geräten und Benutzerfähigkeiten aus, insbesondere in globalen Märkten, in denen Touch-First-Geräte vorherrschen.

color-gamut: Jenseits von sRGB

Das Medienmerkmal color-gamut ermöglicht es Ihnen zu erkennen, ob das Display des Benutzers einen breiteren Farbraum als den Standard-sRGB unterstützt (z. B. P3 oder Rec. 2020). Dies ermöglicht es Designern, eine reichhaltigere, lebendigere Farbpalette auf kompatiblen Bildschirmen zu verwenden.

• srgb: Standard-sRGB-Farbraum.
• p3: Display unterstützt P3-Farbraum (breiter als sRGB).
• rec2020: Display unterstützt Rec. 2020-Farbraum (noch breiter).

            /* P3-Farben für lebendigere Markenelemente auf kompatiblen Displays verwenden */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* Ein leuchtendes Rot in P3 */
  }
}

            

              
                Copy
              
            
          

Obwohl dieses Merkmal noch im Entstehen ist, weist es auf eine Zukunft mit visuell beeindruckenderen und genaueren Weberlebnissen hin, insbesondere für die Kreativbranche oder die Bereitstellung von High-Fidelity-Inhalten.

update: Umgang mit Bildschirmaktualisierungsraten

Dieses Merkmal gibt an, wie schnell das Ausgabegerät das Erscheinungsbild von Inhalten ändern kann. Dies ist nützlich, um Animationen und dynamische Inhalte für verschiedene Bildschirmtypen zu optimieren.

• none: Kann nicht aktualisiert werden (z. B. gedrucktes Dokument).
• slow: Aktualisiert langsam (z. B. E-Ink-Displays, einige ältere Geräte).
• fast: Aktualisiert schnell (z. B. typische Computermonitore, Smartphones).

            /* Komplexe Animationen auf langsam aktualisierenden Displays reduzieren */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Dieses Merkmal hilft sicherzustellen, dass Benutzer auf Geräten wie E-Readern, die Akkulaufzeit und statische Anzeige priorisieren, keine beeinträchtigte oder ruckelnde Erfahrung durch ungeeignete Animationen erhalten.

Fortgeschrittene Techniken und bewährte Methoden

Über einzelne Medienmerkmale hinaus kann die Art und Weise, wie Sie Ihr CSS strukturieren und diese Muster kombinieren, die Wartbarkeit, Leistung und allgemeine Designqualität erheblich beeinflussen.

Mobile-First vs. Desktop-First: Eine strategische Wahl

Die Wahl zwischen einem Mobile-First- und einem Desktop-First-Ansatz ist grundlegend für die Strategie des responsiven Designs.

• Mobile-First (min-width):
  • Beginnen Sie mit dem Design und Styling für den kleinsten Bildschirm (mobil).
  • Verwenden Sie min-width-Media-Queries, um schrittweise Stile für größere Bildschirme hinzuzufügen.
  • Vorteile:
    • Leistung: Mobile Geräte haben oft weniger Rechenleistung und langsamere Internetverbindungen. Ein Mobile-First-Ansatz stellt sicher, dass anfangs nur notwendige Stile geladen werden, was zu schnelleren Ladezeiten führt. Dies ist entscheidend für Benutzer in Regionen mit sich entwickelnder Internetinfrastruktur.
    • Progressive Enhancement: Sie bauen auf einer soliden, grundlegenden Erfahrung auf und fügen Verbesserungen für leistungsfähigere Geräte hinzu.
    • Fokus: Ermutigt Entwickler, wesentliche Inhalte und Funktionen zu priorisieren.
• Desktop-First (max-width):
  • Beginnen Sie mit dem Design für große Bildschirme (Desktop).
  • Verwenden Sie max-width-Media-Queries, um Stile für kleinere Bildschirme zu überschreiben.
  • Vorteile: Kann für Teams einfacher sein, die an traditionelles Desktop-Design gewöhnt sind, führt aber oft zu komplexeren Überschreibungen für Mobilgeräte.

Für die meisten modernen Projekte, insbesondere solche, die auf ein globales Publikum mit unterschiedlichen Gerätefähigkeiten und Netzwerkbedingungen abzielen, wird der Mobile-First-Ansatz dringend empfohlen.

            /* Mobile-First-Ansatz: Stile für kleine Bildschirme sind Standard */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Tablet-spezifische Stile */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Desktop-spezifische Stile */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Verwendung von CSS Custom Properties (Variablen) mit Media Queries

Die Kombination von CSS Custom Properties (Variablen) mit Media Queries ist ein Wendepunkt für die Wartung großer, responsiver Stylesheets. Anstatt Werte zu wiederholen, definieren Sie sie einmal und ändern ihre Werte innerhalb von Media Queries.

            /* Standardwerte (mobil) definieren */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Werte für Tablet-Bildschirme anpassen */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Werte für Desktop-Bildschirme anpassen */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Die Variablen im gesamten CSS verwenden */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Stile für Bildschirme zwischen 600px und 900px anwenden */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Äquivalent mit traditioneller Syntax */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Nicht wesentliche Elemente für den Druck ausblenden */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Sicherstellen, dass der Text zur Lesbarkeit schwarz auf weiß ist */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Vollständige URLs für Links anzeigen */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Seitenumbrüche angemessen setzen */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-First: Standardmäßig ein verstecktes Off-Canvas-Menü */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tablet & Desktop: Horizontales Menü anzeigen */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Weitere Anpassungen für sehr breite Bildschirme oder bestimmte Seitenverhältnisse */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Standard (mobil/niedrige Auflösung) Hintergrundbild */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Hintergrundbild für mittlere Auflösung/Desktop */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* Spezifisches Hintergrundbild für High-DPI (Retina) */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Flüssige Typografie mit calc() und clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Grid für Tablets im Querformat anpassen, mehr Spalten bevorzugen */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Schriftgewicht für den Hochkontrastmodus zur besseren Lesbarkeit anpassen */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Zentralisierte Farbvariablen, anpassbar an Hell-/Dunkelmodus */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Animationen reduzieren, wenn vom Benutzer bevorzugt */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Anpassungen für den Modus für erzwungene Farben */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Sicherstellen, dass Button-Ränder sichtbar sind */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Beispiel für eine zukünftige Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy