css mit Adi Prinz

Grundlegender Aufbau

Eine Media Query beginnt mit der Regel @media. Dahinter folgt die Bedingung, unter der die enthaltenen CSS-Regeln angewendet werden.

@media (min-width: 48rem) {
  .card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
    

Die Regeln innerhalb dieser Media Query gelten, sobald der Viewport mindestens 48rem breit ist.

Media Types

Media Types beschreiben die allgemeine Art des Ausgabemediums.

@media screen and (min-width: 48rem) {
  .navigation {
    display: flex;
  }
}

@media print {
  .navigation,
  .sidebar {
    display: none;
  }
}
    

Für responsive Bildschirm-Layouts muss screen normalerweise nicht ausdrücklich angegeben werden. Die kürzere Schreibweise ist ausreichend:

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

Media Features

Media Features prüfen bestimmte Eigenschaften des Ausgabegeräts, des Viewports oder der Benutzereinstellungen.

Mobile First mit min-width

Beim Mobile-First-Prinzip werden zuerst die CSS-Regeln für schmale Viewports festgelegt. Anschließend wird das Layout mit zunehmender Breite erweitert.

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

@media (min-width: 48rem) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 75rem) {
  .card-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
    

Das Beispiel erzeugt:

• standardmäßig eine Spalte,
• ab 48rem zwei Spalten,
• ab 75rem vier Spalten.

Desktop First mit max-width

Beim Desktop-First-Prinzip wird zunächst die Darstellung für große Viewports festgelegt. Mit max-width wird das Layout anschließend für kleinere Breiten angepasst.

.card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 74.999rem) {
  .card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 47.999rem) {
  .card-container {
    grid-template-columns: 1fr;
  }
}
    

Diese Vorgehensweise ist technisch möglich. Bei neuen Projekten ist Mobile First jedoch häufig übersichtlicher, weil Erweiterungen mit zunehmendem Platz ergänzt werden.

Breakpoints nach dem Inhalt wählen

Breakpoints sollten nicht ausschließlich nach bekannten Gerätebezeichnungen ausgewählt werden. Entscheidend ist der Punkt, an dem das vorhandene Layout nicht mehr ausreichend Platz besitzt.

Typische Hinweise für einen notwendigen Breakpoint sind:

• Navigationseinträge passen nicht mehr in eine Zeile.
• Textspalten werden zu schmal oder zu breit.
• Karten wirken stark zusammengedrückt.
• Bedienelemente überlagern sich.
• große leere Flächen entstehen.
• Inhalte verlieren ihre sinnvolle visuelle Reihenfolge.

Typische Breakpoint-Bereiche

Für Lernbeispiele und einheitliche Projekte können vordefinierte Breakpoints hilfreich sein. Sie sind jedoch keine festen Gerätegrenzen.

Die Umrechnung in Pixel dient nur der Orientierung. Bei der üblichen Browser-Schriftgröße entsprechen 48rem ungefähr 768px.

Warum Breakpoints häufig in rem angegeben werden

Breakpoints können in px, em oder rem angegeben werden.

@media (min-width: 48rem) {
  /* Regeln für breitere Viewports */
}
    

Relative Einheiten können besser auf veränderte Browser- und Schriftgrößeneinstellungen reagieren. Dadurch kann das Layout früher umschalten, wenn größere Texte mehr Platz benötigen.

Bereiche mit Mindest- und Höchstbreite

Mehrere Bedingungen können mit and verbunden werden. Damit lässt sich ein begrenzter Breitenbereich definieren.

@media (min-width: 48rem) and (max-width: 74.999rem) {
  .sidebar {
    display: none;
  }
}
    

Die enthaltenen Regeln gelten ab 48rem und unterhalb von 75rem.

Mit der modernen Bereichssyntax kann dieselbe Bedingung kürzer geschrieben werden:

@media (48rem <= width < 75rem) {
  .sidebar {
    display: none;
  }
}
    

Mehrere Media Queries mit Komma verbinden

Ein Komma innerhalb einer Media Query funktioniert wie eine logische Oder-Verknüpfung. Es genügt, wenn eine der Bedingungen erfüllt ist.

@media (max-width: 30rem), (orientation: landscape) {
  .notice {
    display: block;
  }
}
    

Die Regeln gelten, wenn:

• der Viewport höchstens 30rem breit ist oder
• sich das Gerät beziehungsweise der Viewport im Querformat befindet.

Bedingungen mit not umkehren

Mit not kann das Ergebnis einer Media Query umgekehrt werden.

@media not (hover: hover) {
  .tooltip {
    display: none;
  }
}
    

Im Beispiel wird die Regel angewendet, wenn das primäre Eingabegerät nicht bequem hovern kann.

Hochformat und Querformat

Das Media Feature orientation unterscheidet die beiden grundlegenden Ausrichtungen des Viewports.

@media (orientation: portrait) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
    

Die Ausrichtung sagt nichts über die Geräteart aus. Auch ein Desktopfenster kann schmaler als hoch und damit im Hochformat sein.

Hover-Fähigkeit erkennen

Hover-Effekte sollten nur verwendet werden, wenn das Eingabegerät sie sinnvoll unterstützt. Touchscreens besitzen normalerweise keinen dauerhaften Hover-Zustand.

.card-link {
  text-decoration: underline;
}

@media (hover: hover) {
  .card-link {
    text-decoration: none;
  }

  .card-link:hover {
    text-decoration: underline;
  }
}
    

Genauigkeit des Zeigegeräts

Das Media Feature pointer beschreibt die Genauigkeit des primären Zeigegeräts.

@media (pointer: coarse) {
  .button {
    min-height: 3rem;
    padding: 0.875rem 1.25rem;
  }
}
    

Auf weniger genauen Eingabegeräten können größere Schaltflächen die Bedienung erleichtern.

Dunkles Farbschema berücksichtigen

Mit prefers-color-scheme kann die Farbschema-Einstellung des Systems berücksichtigt werden.

:root {
  color-scheme: light dark;

  --page-background: #ffffff;
  --text-color: #212529;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: #1f2328;
    --text-color: #f0f3f6;
  }
}

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

Durch CSS Custom Properties können die verwendeten Farben an einer zentralen Stelle ausgetauscht werden.

Reduzierte Bewegung berücksichtigen

Manche Menschen reagieren empfindlich auf starke Bewegungen, Zoom-Effekte oder automatisch ablaufende Animationen. Mit prefers-reduced-motion kann diese Einstellung berücksichtigt werden.

.card {
  transition:
    transform 300ms ease,
    box-shadow 300ms ease;
}

.card:hover {
  transform: translateY(-0.5rem);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }

  .card:hover {
    transform: none;
  }
}
    

Media Queries für den Druck

Eine Webseite kann für die Druckausgabe angepasst werden. Navigation, interaktive Bedienelemente und dekorative Bereiche werden dabei häufig ausgeblendet.

@media print {
  .main-navigation,
  .sidebar,
  .button,
  video {
    display: none;
  }

  body {
    color: #000000;
    background: #ffffff;
    font-size: 12pt;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  article {
    break-inside: avoid;
  }
}
    

Druckregeln sollten in der Druckvorschau geprüft werden. Besonders Seitenumbrüche, ausgeblendete Inhalte und Linkdarstellungen können dort kontrolliert werden.

Media Queries ohne feste Geräteklassen

Ein flexibles Grid benötigt häufig weniger Breakpoints als ein Layout mit festen Spaltenzahlen.

.card-container {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
    

Die Spalten werden automatisch erzeugt. Ein zusätzlicher Breakpoint ist nur erforderlich, wenn sich nicht nur die Spaltenanzahl, sondern beispielsweise auch Navigation, Reihenfolge oder Darstellung der Inhalte verändern soll.

Navigation mit einem Breakpoint

Eine typische responsive Navigation verwendet zunächst einen Menü-Button. Sobald genügend Platz vorhanden ist, werden die Navigationslinks direkt angezeigt.

.nav-toggle {
  display: inline-flex;
}

.nav-list {
  display: none;
}

.nav-list.is-open {
  display: flex;
  flex-direction: column;
}

@media (min-width: 48rem) {
  .nav-toggle {
    display: none;
  }

  .nav-list,
  .nav-list.is-open {
    display: flex;
    flex-direction: row;
  }
}
    

Der Breakpoint sollte dort liegen, wo alle Navigationseinträge ausreichend Platz besitzen. Er muss nicht automatisch mit einer bestimmten Geräteklasse übereinstimmen.

Überschreibungen möglichst klein halten

Innerhalb einer Media Query müssen nur die Eigenschaften wiederholt werden, deren Werte sich ändern.

Unnötig umfangreich

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #cccccc;
}

@media (min-width: 48rem) {
  .card {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #cccccc;
  }
}
    

Besser

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #cccccc;
}

@media (min-width: 48rem) {
  .card {
    flex-direction: row;
  }
}
    

Die zweite Version zeigt sofort, welche Änderung am Breakpoint vorgenommen wird, und lässt sich leichter warten.

Media Queries sinnvoll anordnen

Bei Mobile First werden die Breakpoints normalerweise von klein nach groß angeordnet.

/* Grundlayout */

@media (min-width: 36rem) {
  /* Small */
}

@media (min-width: 48rem) {
  /* Medium */
}

@media (min-width: 62rem) {
  /* Large */
}

@media (min-width: 75rem) {
  /* Extra Large */
}
    

Spätere Regeln können frühere Regeln überschreiben. Eine nachvollziehbare Reihenfolge hilft deshalb, unbeabsichtigte Konflikte zu vermeiden.

Häufige Fehler

• Das Grundlayout funktioniert nur innerhalb einer Media Query.
• Breakpoints werden ausschließlich nach bestimmten Geräten gewählt.
• Zu viele kleine Breakpoints machen das Stylesheet schwer wartbar.
• min-width und max-width werden ohne klares System vermischt.
• Innerhalb einer Media Query werden unveränderte CSS-Regeln vollständig wiederholt.
• Hover-Effekte enthalten wichtige Funktionen, die auf Touchscreens nicht zugänglich sind.
• Animationen berücksichtigen prefers-reduced-motion nicht.
• Media Queries werden verwendet, obwohl Flexbox oder Grid die Anpassung automatisch übernehmen könnten.
• Das Viewport-Meta-Element fehlt im HTML-Dokument.
• Das Layout wird nur mit wenigen festen Fensterbreiten getestet.

Zusammenfassung

• Media Queries wenden CSS-Regeln nur unter bestimmten Bedingungen an.
• Mobile First verwendet ein Grundlayout für schmale Viewports und erweitert es mit min-width.
• Breakpoints sollten vom Inhalt und nicht von einzelnen Gerätemodellen bestimmt werden.
• Mehrere Bedingungen können mit and verbunden werden.
• Ein Komma stellt eine Oder-Verknüpfung dar.
• orientation, hover und pointer berücksichtigen weitere Eigenschaften der Nutzungssituation.
• prefers-color-scheme und prefers-reduced-motion berücksichtigen persönliche Systemeinstellungen.
• Flexible Layouts mit Flexbox und Grid können die Anzahl notwendiger Media Queries deutlich reduzieren.
• Innerhalb einer Media Query sollten nur tatsächlich notwendige Änderungen stehen.