CSS Media Queries Guide

CSS Media Queries sind eine Möglichkeit, Browser nach bestimmten Merkmalen, Funktionen und Benutzereinstellungen anzusprechen und darauf basierend Stile anzuwenden oder Code auszuführen. Die weltweit am weitesten verbreiteten Media Queries sind wohl diejenigen, die auf bestimmte Viewport-Bereiche abzielen und benutzerdefinierte Stile anwenden, was die gesamte Idee des Responsive Designs hervorbrachte.

/* When the browser is at least 600px and above */
@media screen and (min-width: 600px) {
  .element {
    /* Apply some styles */
  }
}

Es gibt noch viele andere Dinge, die wir neben der Viewport-Breite anvisieren können. Das können die Bildschirmauflösung, die Geräteausrichtung, Betriebssystem-Präferenzen oder noch vieles mehr aus einer ganzen Reihe von Dingen sein, die wir abfragen und zum Stylen von Inhalten verwenden können.

Suchen Sie nach einer schnellen Liste von Media Queries basierend auf den Viewports gängiger Geräte wie Handys, Tablets und Laptops? Schauen Sie sich unsere Sammlung von Snippets an.

Verwendung von Media Queries

Media Queries werden üblicherweise mit CSS assoziiert, können aber auch in HTML und JavaScript verwendet werden.

HTML

Es gibt ein paar Möglichkeiten, wie wir Media Queries direkt in HTML verwenden können.

Da ist das <link>-Element, das direkt in den <head> des Dokuments kommt. In diesem Beispiel sagen wir dem Browser, dass wir bei verschiedenen Viewport-Größen unterschiedliche Stylesheets verwenden möchten.

<html>
  <head>
    <!-- Served to all users -->
    <link rel="stylesheet" href="all.css" media="all" />
    <!-- Served to screens that are at least 20em wide -->
    <link rel="stylesheet" href="small.css" media="(min-width: 20em)" />
    <!-- Served to screens that are at least 64em wide -->
    <link rel="stylesheet" href="medium.css" media="(min-width: 64em)" />
    <!-- Served to screens that are at least 90em wide -->
    <link rel="stylesheet" href="large.css" media="(min-width: 90em)" />
    <!-- Served to screens that are at least 120em wide -->
    <link rel="stylesheet" href="extra-large.css" media="(min-width: 120em)" />
    <!-- Served to print media, like printers -->
    <link rel="stylesheet" href="print.css" media="print" />
  </head>
  <!-- ... -->
</html>

Warum sollte man das tun wollen? Es kann ein guter Weg sein, um die Performance Ihrer Website zu optimieren, indem Sie Stile so aufteilen, dass sie nur von den Geräten heruntergeladen und bereitgestellt werden, die sie tatsächlich benötigen.

Aber um klar zu sein: Dies verhindert nicht immer, dass Stylesheets heruntergeladen werden, die nicht auf diese Media Queries passen; es weist ihnen lediglich eine niedrige Ladepriorität zu.

Wenn also ein Gerät mit kleinem Bildschirm wie ein Handy die Website besucht, wird es nur die Stylesheets in den Media Queries herunterladen, die seiner Viewport-Größe entsprechen. Wenn jedoch ein größerer Desktop-Bildschirm kommt, wird er das gesamte Paket herunterladen, da er auf all diese Abfragen passt (nun ja, minus der Print-Abfrage in diesem speziellen Beispiel).

Das ist nur das <link>-Element. Wie unser Leitfaden für responsive Bilder erklärt, können wir Media Queries auch für das <source>-Element verwenden, was dem <picture>-Element mitteilt, welche Version eines Bildes der Browser aus einer Reihe von Bildoptionen verwenden soll.

<picture>
  <!-- Use this image if the screen is at least 800px wide -->
  <source srcset="cat-landscape.png" media="(min-width: 800px)">
  <!-- Use this image if the screen is at least 600px wide -->
  <source srcset="cat-cropped.png" media="(min-width: 600px)">

  <!-- Use this image if nothing matches -->
  <img src="cat.png" alt="A calico cat with dark aviator sunglasses.">
</picture>

Auch dies kann ein schöner Performance-Gewinn sein, da wir kleineren Geräten kleinere Bilder servieren können – was vermutlich (aber nicht immer) leistungsschwächere Geräte sein werden, die möglicherweise durch einen Datentarif begrenzt sind.

Und vergessen wir nicht, dass wir Media Queries auch direkt im <style>-Element verwenden können.

<style>
  p {
    background-color: blue;
    color: white;
  }
</style>

<style media="all and (max-width: 500px)">
  p {
    background-color: yellow;
    color: blue;
  }
</style>

CSS

CSS ist wiederum der am häufigsten anzutreffende Ort für Media Queries. Sie stehen direkt im Stylesheet in einer @media-Regel, die Elemente mit Bedingungen umschließt, wann und wo ein Satz von Stilen angewendet werden soll, wenn ein Browser diese Bedingungen erfüllt.

/* Viewports between 320px and 480px wide */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .card {
    background: #bada55;
  }
}

Es ist auch möglich, den Geltungsbereich importierter Stylesheets festzulegen, aber als allgemeine Regel gilt: Vermeiden Sie die Verwendung von @import, da die Performance schlecht ist.

/* Avoid using @import if possible! */

/* Base styles for all screens */
@import url("style.css") screen;
/* Styles for screens in a portrait (narrow) orientation */
@import url('landscape.css') screen and (orientation: portrait);
/* Print styles */
@import url("print.css") print;

JavaScript

Wir können Media Queries auch in JavaScript verwenden! Und wissen Sie was? Sie funktionieren ganz ähnlich wie in CSS. Der Unterschied? Wir beginnen mit der Methode window.matchMedia(), um zuerst die Bedingungen zu definieren.

Angenommen, wir möchten eine Nachricht in der Konsole protokollieren, wenn der Browser mindestens 768px breit ist. Wir können eine Konstante erstellen, die matchMedia() aufruft und diese Bildschirmbreite definiert.

// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia( '( min-width: 768px )' )

Dann können wir ein Log in der Konsole auslösen, wenn diese Bedingung erfüllt ist.

// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia( '( min-width: 768px )' )
 
// Note the `matches` property
if ( mediaQuery.matches ) {
  console.log('Media Query Matched!')
}

Leider wird dies nur einmal ausgelöst. Wenn die Warnung geschlossen wird, wird sie nicht erneut ausgelöst, wenn wir die Bildschirmbreite ändern und es ohne Neuladen erneut versuchen. Deshalb ist es eine gute Idee, einen Listener zu verwenden, der nach Aktualisierungen sucht.

// Create a condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')
 
function handleTabletChange(e) {
  // Check if the media query is true
  if (e.matches) {
    // Then log the following message to the console
    console.log('Media Query Matched!')
  }
}
 
// Register event listener
mediaQuery.addListener(handleTabletChange)

// Initial check
handleTabletChange(mediaQuery)

Schauen Sie sich Marko Ilics vollständigen Beitrag über „Working with JavaScript Media Queries“ für einen tieferen Einblick an, einschließlich eines Vergleichs zwischen der Verwendung von Media Queries und einem älteren JavaScript-Ansatz, der einen resize-Event-Listener bindet, der window.innerWidth oder window.innerHeight prüft, um Änderungen auszulösen.

Anatomie einer Media Query

Nachdem wir nun mehrere Beispiele gesehen haben, wo Media Queries verwendet werden können, wollen wir sie zerlegen und sehen, was sie eigentlich tun.

@media

@media [media-type] ([media-feature]) {
  /* Styles! */
}

Die erste Zutat in einem Media-Query-Rezept ist die @media-Regel selbst, die eine von vielen CSS-At-Regeln ist. Warum bekommt @media die ganze Aufmerksamkeit? Weil sie auf den Typ des Mediums ausgerichtet ist, mit dem eine Website betrachtet wird, welche Features dieser Medientyp unterstützt und Operatoren, die kombiniert werden können, um einfache und komplexe Bedingungen gleichermaßen zu mischen.

Medientypen (Media Types)

@media screen {
  /* Styles! */
}

Welche Art von Medium versuchen wir anzusprechen? In vielen (wenn nicht den meisten) Fällen werden Sie hier einen screen-Wert sehen, was Sinn ergibt, da viele der Medientypen, die wir abgleichen wollen, Geräte mit angeschlossenen Bildschirmen sind.

Aber Bildschirme sind natürlich nicht der einzige Medientyp, den wir anvisieren können. Wir haben ein paar, darunter:

all: Entspricht allen Geräten
print: Entspricht Dokumenten, die in einer Druckvorschau betrachtet werden, oder allen Medien, die den Inhalt in Seiten aufteilen, die zum Drucken bestimmt sind.
screen: Entspricht Geräten mit einem Bildschirm
speech: Entspricht Geräten, die den Inhalt akustisch vorlesen, wie z. B. ein Screenreader. Dies ersetzt den seit Media Queries Level 4 veralteten Typ aural.

Um Druckstile auf einem Bildschirm in der Vorschau anzuzeigen, können alle gängigen Browser die Ausgabe eines Print-Stylesheets mit den DevTools emulieren. Andere Medientypen wie tty, tv, projection, handheld, braille, embossed und aural sind veraltet. Während die Spezifikation den Browsern weiterhin rät, sie zu erkennen, müssen sie als "nichts" ausgewertet werden. Wenn Sie einen dieser Typen verwenden, sollten Sie ihn durch einen modernen Ansatz ersetzen.

Medienmerkmale (Media Features)

Sobald wir den Medientyp definiert haben, den wir abgleichen wollen, können wir damit beginnen, die Merkmale (Features) zu definieren. Wir haben uns viele Beispiele angesehen, die Bildschirme mit der Breite abgleichen, wobei screen der Typ ist und sowohl min-width als auch max-width Features mit spezifischen Werten sind.

Aber es gibt noch viele, viele (viele!) weitere „Features“, die wir abgleichen können. Media Queries Level 4 gruppiert 18 Medienmerkmale in 5 Kategorien.

Viewport/Seiteneigenschaften

Merkmal	Zusammenfassung	Werte	Hinzugefügt
`width`	Definiert die Breite des Viewports. Dies kann eine spezifische Zahl (z. B. `400px`) oder ein Bereich (unter Verwendung von `min-width` und `max-width`) sein.	`<length>`
`height`	Definiert die Höhe des Viewports. Dies kann eine spezifische Zahl (z. B. `400px`) oder ein Bereich (unter Verwendung von `min-height` und `max-height`) sein.	`<length>`
`aspect-ratio`	Definiert das Breite-zu-Höhe-Seitenverhältnis des Viewports.	`<ratio>`
`orientation`	Die Art und Weise, wie der Bildschirm ausgerichtet ist, z. B. hochkant (`portrait`) oder breit (`landscape`), basierend darauf, wie das Gerät gedreht wird.	`portrait` `landscape`
`overflow-block`	Prüft, wie das Gerät mit Inhalten umgeht, die den Viewport in Blockrichtung überlaufen. Werte können sein: `scroll` (erlaubt Scrollen), `optional-paged` (erlaubt Scrollen und manuelle Seitenumbrüche), `paged` (in Seiten aufgeteilt) und `none` (nicht angezeigt).	`scrollen` `optional-paged` `paged`	Media Queries Level 4
`overflow-inline`	Prüft, ob Inhalte, die den Viewport entlang der Inline-Achse überlaufen, gescrollt werden können. Entweder `none` (kein Scrollen) oder `scroll` (erlaubt Scrollen).	`scrollen` `none`	Media Queries Level 4

Anzeigequalität

Merkmal	Zusammenfassung	Werte	Hinzugefügt
`resolution`	Definiert die Ziel-Pixeldichte des Geräts.	`<resolution>` `infinite`
`scan`	Definiert den Scan-Prozess des Geräts, also die Art und Weise, wie das Gerät ein Bild auf den Bildschirm zeichnet (wobei `interlace` abwechselnd ungerade und gerade Zeilen zeichnet und `progressive` sie alle nacheinander zeichnet).	`interlace` `progressive`
`Grid`	Bestimmt, ob das Gerät einen Raster- (`1`) oder Bitmap-Bildschirm (`0`) verwendet.	`0` = Bitmap `1` = Raster (Grid)	Media Queries Level 5
`update`	Prüft, wie häufig das Gerät das Erscheinungsbild von Inhalten ändern kann (falls überhaupt), mit Werten wie `none`, `slow` und `fast`.	`slow` `fast` `none`	Media Queries Level 4
`environment-blending`	Eine Methode zur Bestimmung der äußeren Umgebung eines Geräts, z. B. dimmriges Licht oder übermäßig helle Orte.	`opaque` `additive` `subtractive`
`display-mode`	Testet den Anzeigemodus eines Geräts, einschließlich `fullscreen` (kein Browser-Chrome), `standalone` (eine eigenständige Anwendung), `minimal-ui` (eine eigenständige Anwendung, aber mit einigen Navigationselementen) und `browser` (ein traditionelleres Browserfenster).	`fullscreen` `standalone` `minimal-ui` `browser`	Web App Manifest

Farbe

Merkmal	Zusammenfassung	Werte	Hinzugefügt
`color`	Definiert die Farbundterstützung eines Geräts, numerisch ausgedrückt in Bits. Ein Wert von `12` entspräche also einem Gerät, das 12-Bit-Farbe unterstützt, und ein Wert von Null zeigt keine Farbundterstützung an.	`<integer>`
`color-index`	Definiert die Anzahl der Farben, die das Gerät unterstützt. Dies kann eine spezifische Zahl (z. B. `10000`) oder ein Bereich sein (z. B. `min-color-index: 10000`, `max-color-index: 15000`), genau wie bei `width`.	`<integer>`
`monochrome`	Die Anzahl der Bits pro Pixel, die das monochrome Display eines Geräts unterstützt, wobei Null keine Monochrom-Unterstützung bedeutet.	`<integer>`
`color-gamut`	Definiert den Farbumfang, der vom Browser und Gerät unterstützt wird, z. B. `srgb`, `p3` oder `rec2020`.	`srgb` `p3` `rec2020`	Media Queries Level 4
`dynamic-range`	Die Kombination aus Helligkeit, Farbtiefe und Kontrastverhältnis, die von der Videoebene des Browsers und des Benutzergeräts unterstützt wird.	`standard` `high`
`inverted-colors`	Prüft, ob der Browser oder das Betriebssystem so eingestellt ist, dass Farben invertiert werden (nützlich zur Optimierung der Barrierefreiheit bei Sehbehinderungen mit Farbbezug).	`inverted` `none`	Media Queries Level 5

Interaktion

Merkmal	Zusammenfassung	Werte	Hinzugefügt
`pointer`	Ähnlich wie `any-pointer`, prüft aber, ob der primäre Eingabemechanismus ein Zeiger ist und, wenn ja, wie genau er ist (wobei `coarse` weniger genau, `fine` genauer und `none` kein Zeiger ist).	`coarse` `fine` `none`	Media Queries Level 4
`hover`	Ähnlich wie `any-hover`, prüft aber, ob der primäre Eingabemechanismus (z. B. Maus oder Touch) es dem Benutzer ermöglicht, über Elemente zu schweben (Hover).	`hover` `none`	Media Queries Level 4
`any-pointer`	Prüft, ob das Gerät einen Zeiger verwendet (z. B. Maus oder Stift) sowie dessen Genauigkeit (`coarse` für weniger genau, `fine` für genauer).	`coarse` `fine` `none`	Media Queries Level 4
`any-hover`	Prüft, ob das Gerät fähig ist, Hover-Zustände auf Elementen auszulösen, etwa mit einer Maus oder einem Stift. In seltenen Fällen sind auch Touch-Geräte dazu in der Lage.	`hover none`	Media Queries Level 4

Video-Präfix

Die Spezifikation bezieht sich auf User Agents, einschließlich TVs, die Video und Grafik in zwei separaten Ebenen rendern, die jeweils eigene Merkmale haben. Die folgenden Features beschreiben diese Ebenen.

Merkmal	Zusammenfassung	Werte	Hinzugefügt
`video-color-gamut`	Beschreibt den ungefähren Farbumfang, der von der Videoebene des Browsers und des Benutzergeräts unterstützt wird.	`srgb` `p3` `rec2020`	Media Queries Level 5
`video-dynamic-range`	Die Kombination aus Helligkeit, Farbtiefe und Kontrastverhältnis, die von der Videoebene des Browsers und des Benutzergeräts unterstützt wird.	`standard` `high`	Media Queries Level 5
`video-width`¹	Die Breite des Videoebenenbereichs des Ziel-Displays.	`<length>`	Media Queries Level 5
`video-height`¹	Die Höhe des Videoebenenbereichs des Ziel-Displays.	`<length>`	Media Queries Level 5
`video-resolution`¹	Die Auflösung des Videoebenenbereichs des Ziel-Displays.	`<resolution>` `infinite`	Media Queries Level 5

¹ In Diskussion (Issue #5044)

Scripting

Merkmal	Zusammenfassung	Werte	Hinzugefügt
`scripting`	Prüft, ob das Gerät Scripting (d. h. JavaScript) erlaubt, wobei `enabled` Scripting erlaubt, `initial-only`	`enabled (aktiviert)` `initial-only (nur initial)`	Media Queries Level 5

Benutzereinstellungen

Merkmal	Zusammenfassung	Werte	Hinzugefügt
`prefers-reduced-motion`	Erkennt, ob die Systemeinstellungen des Benutzers so eingestellt sind, dass Bewegungen auf der Seite reduziert werden sollen – ein großartiger Check für die Barrierefreiheit.	`no-preference (keine Präferenz)` `reduce (reduzieren)`	Media Queries Level 5
`prefers-reduced-transparency`	Erkennt, ob die Systemeinstellungen des Benutzers Transparenz zwischen Elementen verhindern sollen.	`no-preference (keine Präferenz)` `reduce (reduzieren)`	Media Queries Level 5
`prefers-contrast`	Erkennt, ob die Systemeinstellungen des Benutzers so eingestellt sind, dass der Kontrast zwischen Farben entweder erhöht oder verringert wird.	`no-preference (keine Präferenz)` `high` `low (niedrig)` `forced (erzwungen)`	Media Queries Level 5
`prefers-color-scheme`	Erkennt, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt – eine schnell wachsende Methode zum Erstellen von „Dark Mode“-Interfaces.	`light (hell)` `dark (dunkel)`	Media Queries Level 5
`forced-colors`	Testet, ob der Browser die verfügbaren Farben einschränkt (`none` oder `active`).	`active (aktiviert)` `none`	Media Queries Level 5
`prefers-reduced-data`	Erkennt, ob der Benutzer bevorzugt, weniger Daten für das Rendern der Seite zu verwenden.	`no-preference (keine Präferenz)` `reduce (reduzieren)`	Media Queries Level 5

Veraltet (Deprecated)

Name	Zusammenfassung	Entfernt
`device-aspect-ratio`	Das Breite-zu-Höhe-Seitenverhältnis des Ausgabegeräts.	Media Queries Level 4
`device-height`	Die Höhe der Geräteoberfläche, die gerenderte Elemente anzeigt.	Media Queries Level 4
`device-width`	Die Breite der Geräteoberfläche, die gerenderte Elemente anzeigt.	Media Queries Level 4

Operatoren

Media Queries unterstützen logische Operatoren wie viele Programmiersprachen, sodass wir Medientypen basierend auf bestimmten Bedingungen abgleichen können. Die @media-Regel selbst ist ein logischer Operator, der im Grunde besagt: „Wenn“ die folgenden Typen und Merkmale übereinstimmen, dann tue etwas.

`and`

Wir können jedoch den and-Operator verwenden, wenn wir Bildschirme innerhalb eines bestimmten Breitenbereichs ansprechen wollen.

/* Matches screen between 320px AND 768px */
@media screen (min-width: 320px) and (max-width: 768px) {
  .element {
    /* Styles! */
  }
}

`or` (oder Komma-getrennt)

Wir können Merkmale auch durch Kommas trennen, um sie wie einen or-Operator zu verwenden und verschiedene Merkmale abzugleichen.

/* 
  Matches screens where either the user prefers dark mode or the screen is at least 1200px wide */
@media screen (prefers-color-scheme: dark), (min-width 1200px) {
  .element {
    /* Styles! */
  }
}

`not`

Vielleicht möchten wir Geräte danach ansprechen, was sie nicht unterstützen oder womit sie nicht übereinstimmen. Diese Deklaration entfernt die Hintergrundfarbe des Bodys, wenn das Gerät ein Drucker ist und nur eine Farbe anzeigen kann.

@media print and ( not(color) ) {
  body {
    background-color: none;
  }
}

Wollen Sie tiefer einsteigen? Schauen Sie sich „CSS Media Queries: Quick Reference & Guide“ aus der DigitalOcean-Community an, um weitere Beispiele zur Syntax von Media Queries zu erhalten.

Brauchen Sie wirklich CSS Media Queries?

Media Queries sind ein mächtiges Werkzeug in Ihrem CSS-Werkzeugkasten mit spannenden versteckten Schätzen. Aber wenn Sie Ihr Design an jede mögliche Situation anpassen, enden Sie mit einer Codebasis, die zu komplex für die Wartung ist. Und wie wir alle wissen, ist CSS wie ein Bärenjunges: süß und harmlos, aber wenn es wächst, wird es Sie bei lebendigem Leibe fressen.

Deshalb empfehle ich, Ranald Maces Konzept des Universal Designs zu folgen: „das Design von Produkten, die für alle Menschen im größtmöglichen Umfang nutzbar sind, ohne dass eine Anpassung oder ein spezielles Design erforderlich ist.“

In „Accessibility for Everyone“ erklärt Laura Kalbag, dass der Unterschied zwischen barrierefreiem (accessible) und universellem Design subtil, aber wichtig ist. Ein barrierefreier Designer würde eine große Tür für Menschen im Rollstuhl entwerfen, während ein universeller Designer einen Eingang schaffen würde, durch den jeder passt, unabhängig von seinen Fähigkeiten.

Ich weiß, dass es schwierig ist, über universelles Design im Web zu sprechen, und es fast utopisch klingt. Aber denken Sie darüber nach: Es gibt etwa 150 verschiedene Browser, rund 50 verschiedene Kombinationen von Benutzereinstellungen und, wie bereits erwähnt, allein mehr als 24.000 verschiedene und einzigartige Android-Geräte.

Das bedeutet, dass es mindestens 18 Millionen mögliche Fälle gibt, in denen Ihr Inhalt angezeigt werden könnte. In den Worten der fantastischen Miriam Suzanne: „CSS versucht hier, Grafikdesign für unbekannte Inhalte auf einer unendlichen und unbekannten Leinwand über Betriebssysteme, Schnittstellen und Sprachen hinweg zu machen. Es ist für keinen von uns möglich zu wissen, was wir da eigentlich tun.“

Deshalb ist es gefährlich, Annahmen zu treffen. Wenn Sie Ihre Produkte entwerfen, entwickeln und darüber nachdenken, lassen Sie Annahmen hinter sich und nutzen Sie Media Queries, um sicherzustellen, dass Ihr Inhalt in jedem Kontext und für jeden Benutzer korrekt angezeigt wird.

Wertebereiche abgleichen

Viele der im vorherigen Abschnitt beschriebenen Medienmerkmale – einschließlich width, height, color und color-index – können mit dem Präfix min- oder max- versehen werden, um minimale oder maximale Einschränkungen auszudrücken. Wir haben diese bereits in vielen Beispielen gesehen. Der Punkt ist, dass wir einen Wertebereich zum Abgleich erstellen können, anstatt spezifische Werte deklarieren zu müssen.

Im folgenden Snippet färben wir den Hintergrund des Bodys lila, wenn die Viewport-Breite breiter als 30em und schmaler als 80em ist. Wenn die Viewport-Breite nicht diesem Bereich entspricht, wird auf Weiß zurückgegriffen.

body {
  background-color: #fff;
}

@media (min-width: 30em) and (max-width: 80em) {
  body {
    background-color: purple;
  }
}

Media Queries Level 4 spezifiziert eine neue und einfachere Syntax unter Verwendung von "kleiner als" (<), "größer als" (>) und "gleich" (=) Operatoren. Das letzte Beispiel kann also wie folgt in die neue Syntax konvertiert werden:

@media (30em <= width <= 80em) {
  /* ... */
}

Verschachtelung und komplexe Entscheidungsfindung

CSS ermöglicht es Ihnen, At-Regeln zu verschachteln oder Anweisungen mit Klammern zu gruppieren, was es möglich macht, beliebig tief in die Auswertung komplexer Operationen einzusteigen.

@media (min-width: 20em), not all and (min-height: 40em) {  
  @media not all and (pointer: none) { ... }
  @media screen and ( (min-width: 50em) and (orientation: landscape) ), print and ( not (color) ) { ... }
}

Seien Sie vorsichtig! Auch wenn es möglich ist, mächtige und komplexe Ausdrücke zu erstellen, könnten Sie am Ende eine sehr eigenwillige, schwer zu wartende Abfrage haben. Wie Brad Frost es ausdrückt: „Je komplexer unsere Interfaces sind, desto mehr müssen wir nachdenken, um sie ordnungsgemäß zu warten.“

Barrierefreiheit (Accessibility)

Viele der in Media Queries Level 4 hinzugefügten Features konzentrieren sich auf die Barrierefreiheit.

`prefers-reduced-motion`

prefers-reduced-motion erkennt, ob der Benutzer die Einstellung für reduzierte Bewegung aktiviert hat, um die Anzahl der Bewegungen und Animationen zu minimieren. Es akzeptiert zwei Werte:

no-preference: Zeigt an, dass der Benutzer dem System keine Präferenz mitgeteilt hat.
reduce: Zeigt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Schnittstelle bevorzugt, die Bewegungen oder Animationen minimiert, vorzugsweise so weit, dass alle nicht essenziellen Bewegungen entfernt werden.

Diese Einstellung wird im Allgemeinen von Menschen verwendet, die unter einer vestibulären Störung oder Schwindel leiden, wobei verschiedene Bewegungen zu Gleichgewichtsverlust, Migräne, Übelkeit oder Hörverlust führen. Wenn Sie jemals versucht haben, sich schnell zu drehen und Ihnen schwindelig wurde, wissen Sie, wie sich das anfühlt.

In einem fantastischen Artikel von Eric Bailey schlägt er vor, alle Animationen mit diesem Code zu stoppen:

@media screen and (prefers-reduced-motion: reduce) {  
  * {
    /* Very short durations means JavaScript that relies on events still works */
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

Beliebte Frameworks wie Bootstrap haben dieses Feature standardmäßig aktiviert. Meiner Meinung nach gibt es keine Entschuldigung dafür, prefers-reduced-motion nicht zu verwenden – nutzen Sie es einfach.

`prefers-contrast`

Das Feature prefers-contrast informiert darüber, ob der Benutzer in seinen Systemeinstellungen oder Browser-Einstellungen gewählt hat, den Kontrast zu erhöhen oder zu verringern. Es akzeptiert drei Werte:

no-preference: Wenn ein Benutzer dem System keine Präferenz mitgeteilt hat. Wenn Sie es als Boolean verwenden, wird es als false ausgewertet.
high: Wenn ein Benutzer die Option gewählt hat, einen höheren Kontrast anzuzeigen.
low: Wenn ein Benutzer die Option gewählt hat, einen niedrigeren Kontrast anzuzeigen.

Zum Zeitpunkt der Erstellung dieses Textes wird dieses Feature von keinem Browser nativ unterstützt. Microsoft hat eine nicht standardisierte frühere Implementierung mit dem Feature -ms-high-contrast vorgenommen, die nur in Microsoft Edge v18 oder früher funktioniert (aber nicht in Chromium-basierten Versionen).

.button {
  background-color: #0958d8;
  color: #fff;
}

@media (prefers-contrast: high) {
  .button {
    background-color: #0a0db7;
  }
}

Dieses Beispiel erhöht den Kontrast eines Buttons der Klasse von AA auf AAA, wenn der Benutzer einen hohen Kontrast aktiviert hat.

`inverted-colors`

Das Feature inverted-colors informiert darüber, ob der Benutzer gewählt hat, die Farben in seinen Systemeinstellungen oder Browser-Einstellungen zu invertieren. Manchmal wird diese Option als Alternative zu hohem Kontrast verwendet. Es akzeptiert drei Werte:

none: Wenn Farben normal angezeigt werden.
inverted: Wenn ein Benutzer die Option zur Farbinvertierung gewählt hat.

Das Problem bei invertierten Farben ist, dass auch die Farben von Bildern und Videos invertiert werden, wodurch sie wie Röntgenbilder aussehen. Mit einem CSS-Invert-Filter können Sie alle Bilder und Videos auswählen und sie wieder zurück-invertieren.

@media (inverted-colors) {
  img, video { 
    filter: invert(100%);
  }
}

Zum Zeitpunkt der Erstellung dieses Artikels wird dieses Feature nur von Safari unterstützt.

`prefers-color-scheme`

Ein „Dark Mode“-Farbschema ist etwas, das wir heutzutage immer häufiger sehen. Dank der prefers-color-scheme-Funktion können wir die System- oder Browsereinstellungen eines Benutzers abfragen, um zu bestimmen, ob wir basierend auf dessen Vorlieben ein „dunkles“ oder ein „helles“ Design ausliefern.

Es nimmt zwei Werte an:

light: Wenn ein Benutzer ausgewählt hat, dass er ein helles Design bevorzugt, oder keine aktiven Einstellungen festgelegt hat.
dark: Wenn ein Benutzer in seinen Einstellungen eine dunkle Anzeige gewählt hat.

body {
  --bg-color: white; 
  --text-color: black;

  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: dark) {
  body {
    --bg-color: black;
    --text-color: white;
  }
}

Wie Adhuham im vollständigen Leitfaden zum Dark Mode erklärt, gehört dazu viel mehr als nur das Ändern der Hintergrundfarbe. Bevor Sie sich an die Umsetzung des Dark Mode wagen, bedenken Sie: Ohne eine kluge Implementierungsstrategie könnten Sie am Ende eine Codebasis haben, die sehr schwer zu warten ist. CSS-Variablen können hier Wunder wirken, aber das ist Thema eines anderen Artikels.

Was liegt vor uns?

Media Queries Level 5 befindet sich derzeit im Status „Working Draft“, was bedeutet, dass sich bis zur endgültigen Empfehlung noch viel ändern kann. Dennoch enthält es interessante Funktionen, die erwähnenswert sind, da sie neue Wege eröffnen, Bildschirme gezielt anzusprechen und Designs an sehr spezifische Bedingungen anzupassen.

Media-Features für Benutzereinstellungen

Hey, die haben wir gerade im letzten Abschnitt behandelt! Nun ja. Diese Funktionen sind spannend, weil sie auf den tatsächlichen Einstellungen des Benutzers basieren – egal ob diese vom Browser (User Agent) oder sogar auf Betriebssystemebene stammen.

Erkennung einer erzwungenen Farbpalette

Das ist raffiniert. Einige Browser begrenzen die Anzahl der verfügbaren Farben, die zum Rendern von Stilen verwendet werden können. Dies wird als „Modus für erzwungene Farben“ bezeichnet. Wenn dieser in den Browsereinstellungen aktiviert ist, kann der Benutzer einen begrenzten Farbsatz zur Verwendung auf einer Seite wählen. Dadurch ist der Benutzer in der Lage, Farbkombinationen und Kontraste zu definieren, die das Lesen von Inhalten angenehmer machen.

Das Feature forced-colors ermöglicht uns mit dem Wert active zu erkennen, ob eine erzwungene Farbpalette verwendet wird. Falls dies zutrifft, muss der Browser die erforderliche Farbpalette über die CSS-Systemfarben bereitstellen. Dem Browser wird zudem der Spielraum gegeben zu bestimmen, ob die Hintergrundfarbe der Seite hell oder dunkel ist, und gegebenenfalls den entsprechenden prefers-color-scheme-Wert auszulösen, damit wir die Seite anpassen können.

Erkennung von maximaler Helligkeit, Farbtiefe und Kontrastverhältnis

Einige Geräte (und Browser) sind in der Lage, extrem helle Displays darzustellen, eine große Farbpalette abzubilden und hohe Kontrastverhältnisse zwischen Farben zu erzielen. Wir können diese Geräte mit dem Feature dynamic-range erkennen, wobei das Schlüsselwort high auf diese Geräte zutrifft und standard auf alles andere.

Es ist wahrscheinlich, dass es hier noch Änderungen geben wird, da derzeit noch Unklarheit darüber besteht, welche Messwerte „hohe“ Helligkeits- und Kontrastniveaus definieren. Möglicherweise wird der Browser diese Entscheidung treffen dürfen.

Features mit Video-Präfix

Die Spezifikation spricht über Bildschirme wie Fernseher, die in der Lage sind, Video und Grafiken auf separaten „Ebenen“ (Planes) anzuzeigen, was eine Möglichkeit sein könnte, das Video-Frame von anderen Elementen auf dem Bildschirm zu unterscheiden. Daher schlägt Media Queries Level 5 einen neuen Satz von Media-Features vor, die auf die Erkennung von Videoeigenschaften abzielen, einschließlich Farbraum und Dynamikumfang.

Es gibt auch Vorschläge zur Erkennung von Videohöhe, -breite und -auflösung, aber die Entscheidung steht noch aus, ob dies die richtigen Wege zur Adressierung von Videos sind.

Browser-Unterstützung

Browser entwickeln sich ständig weiter. Da sich die Browser-Unterstützung für dieses Feature bis zum Zeitpunkt, an dem Sie diesen Beitrag lesen, geändert haben könnte, prüfen Sie bitte die aktualisierte Kompatibilitätstabelle auf MDN.

Anmerkung zu Container Queries

Wäre es nicht cool, wenn Komponenten sich an ihrer eigenen Größe statt an der des Browsers anpassen könnten? Darum geht es beim Konzept der CSS Container Queries. Derzeit haben wir nur den Browser-Bildschirm, um diese Änderungen über Media Queries vorzunehmen.

Das ist bedauerlich, da der Viewport nicht immer in direktem Verhältnis zur Größe des Elements selbst steht. Stellen Sie sich ein Widget vor, das in vielen verschiedenen Kontexten auf einer Website erscheint: manchmal in einer Seitenleiste, manchmal in einem Footer über die volle Breite, manchmal in einem Raster mit unbekannten Spalten.

Dies ist das Problem, das Container Queries zu lösen versuchen. Idealerweise könnten wir die Stile eines Elements basierend auf seiner eigenen Größe anpassen, statt auf der Größe des Viewports. Chrome 105 hat die Unterstützung für CSS Container Queries eingeführt. Ebenso Safari 16.1. Zum Zeitpunkt der Erstellung dieses Textes warten wir eigentlich nur noch auf Firefox, um eine breite Unterstützung zu erreichen.

Diese Daten zur Browser-Unterstützung stammen von Caniuse, wo es mehr Details gibt. Eine Zahl gibt an, dass der Browser das Feature ab dieser Version unterstützt.

Desktop

Chrome	Firefox	IE	Edge	Safari
106	110	Nein	106	16.0

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127	16.0

Beispiele

Schauen wir uns einige Media-Query-Beispiele an. Es gibt so viele Kombinationen von Medientypen, Features und Operatoren, dass die Liste der Möglichkeiten den Rahmen sprengen würde. Stattdessen heben wir eine Handvoll basierend auf spezifischen Media-Features hervor.

Layout an verschiedene Viewport-Breiten anpassen

Weitere Infos

Dies ist das wahrscheinlich am weitesten verbreitete Media-Feature. Es fragt die Breite des Browser-Viewports inklusive der Bildlaufleiste ab. Es ermöglichte die CSS-Implementierung dessen, was Ethan Marcotte berühmt als Responsive Design prägte: ein Prozess, bei dem ein Design auf die Größe des Viewports reagiert, indem es eine Kombination aus einem flüssigen Raster, flexiblen Bildern und responsivem Schriftsatz verwendet.

Später entwickelte Luke Wroblewski das Konzept des Responsive Design weiter, indem er den Begriff Mobile-First einführte. Er ermutigte Designer und Entwickler, zuerst mit der Erfahrung auf kleinen Bildschirmen zu beginnen und diese dann progressiv zu erweitern, wenn die Bildschirmbreite und die Gerätekapazitäten zunehmen.

Ein Mobile-First-Ansatz ist meist an der Verwendung von min-width anstelle von max-width zu erkennen. Wenn wir mit min-width beginnen, sagen wir im Grunde: „Hey Browser, fang hier an und arbeite dich nach oben.“ Umgekehrt ist max-width eher so, als würde man größeren Bildschirmen Priorität einräumen.

Ein Ansatz zur Definition von Breakpoints über die Breite ist die Verwendung der Abmessungen von Standardgeräten, wie etwa der exakten Pixelbreite eines iPhones. Aber es gibt sehr, sehr (sehr) viele verschiedene Telefone, Tablets, Laptops und Desktops. Allein bei Android gab es bis August 2015 mehr als 24.000 Variationen von Viewport-Größen, Auflösungen, Betriebssystemen und Browsern.

Während das Anvisieren der präzisen Breite eines bestimmten Geräts für die Fehlersuche oder Einzellösungen hilfreich sein mag, ist es wahrscheinlich nicht die robusteste Lösung für die Wartung einer responsiven Architektur. Das ist beileibe keine neue Idee. Brad Frost predigte bereits in seinem 2013 veröffentlichten Beitrag „7 Habits of Highly Effective Media Queries“ die Tugend, den Inhalt – und nicht die Geräte – die Breakpoints bestimmen zu lassen.

Obwohl Media Queries immer noch ein gültiges Werkzeug zur Erstellung responsiver Oberflächen sind, gibt es viele Situationen, in denen es möglich ist, die Verwendung der Breite ganz zu vermeiden. Modernes CSS erlaubt es uns, flexible Layouts mit CSS Grid und Flexbox zu erstellen, die unseren Inhalt an die Viewport-Größe anpassen, ohne dass Breakpoints hinzugefügt werden müssen. Hier ist zum Beispiel ein Grid-Layout, das die Anzahl der Spalten völlig ohne Media Queries anpasst.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Es gibt viele Artikel darüber, über die Breite hinaus zu denken; ich habe vor einigen Jahren darüber geschrieben und empfehle Una Kravets „Ten modern layouts in one line of CSS“.

Dark Mode

Weitere Infos

Dieses Beispiel stammt direkt aus unserem Leitfaden zum Dark Mode im Web. Die Idee ist, dass wir mithilfe des prefers-color-scheme-Features erkennen können, ob die Systemeinstellungen eines Benutzers auf hellen oder dunklen Modus konfiguriert sind, und dann einen alternativen Farbsatz für das gerenderte UI definieren.

Die Kombination dieser Technik mit CSS Custom Properties macht die Sache noch einfacher, da sie wie Variablen fungieren, die wir nur einmal definieren müssen und dann im gesamten Code verwenden können. Müssen die Farben getauscht werden? Ändern Sie den Wert der Custom Property, und er wird überall aktualisiert. Genau das macht prefers-color-scheme. Wir definieren einen Satz Farben als Custom Properties und definieren sie dann innerhalb einer Media Query mit dem prefers-color-scheme-Feature neu, um die Farben basierend auf den Benutzereinstellungen zu ändern.

Erkennung von Orientierung, Hover und Bewegung in einer responsiven Kartengalerie

Weitere Infos

Diese Galerie ist responsiv, ohne das width-Feature zu verwenden.

Sie erkennt die orientation (Ausrichtung) des Viewports. Bei einem portrait Viewport (Hochformat) wird die Seitenleiste zum Header; bei landscape (Querformat) bleibt sie an der Seite.

Mithilfe des pointer Media-Features wird entschieden, ob das Haupt-Eingabegerät coarse (grob) – wie ein Finger – oder fine (fein) – wie ein Mauszeiger – ist, um die Größe der klickbaren Bereiche der Checkboxen festzulegen.

Anschließend prüft das Beispiel über das hover Media-Feature, ob das Gerät zu Hover-Effekten fähig ist (wie ein Mauszeiger), und zeigt eine Checkbox in jeder Karte an.

Die Animationen werden entfernt, wenn prefers-reduced-motion auf reduce gesetzt ist.

Und ist Ihnen etwas aufgefallen? Wir verwenden tatsächlich keine Media Queries für das eigentliche Layout und die Größe der Karten! Das wird über die minmax()-Funktion am .container-Element gelöst, um zu zeigen, dass Responsive Design nicht immer die Verwendung von Media Queries bedeutet.

Kurz gesagt: Dies ist eine voll responsive App, ohne jemals die width zu messen oder Annahmen zu treffen.

Ein iPhone im Querformat anvisieren

/* iPhone X Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
  /* Styles! */
}

Weitere Infos

Das Media-Feature orientation prüft, ob ein Gerät breitkantig (landscape) oder hochkantig (portrait) gedreht ist.

Obwohl Media Queries nicht genau wissen können, welches Gerät verwendet wird, können wir die exakten Dimensionen eines spezifischen Geräts nutzen. Das obige Snippet zielt auf das iPhone X ab.

Sticky Header für große Viewports anwenden

Weitere Infos

Im obigen Beispiel verwenden wir height, um fixierte Elemente zu lösen und zu vermeiden, dass sie zu viel Platz beanspruchen, wenn der Bildschirm zu niedrig ist. Eine horizontale Navigationsleiste befindet sich in einer festen Position, wenn der Bildschirm hoch ist, löst sich jedoch bei niedrigeren Bildschirmen.

Wie das width-Feature erkennt height die Höhe des Viewports inklusive Bildlaufleiste. Viele von uns surfen auf kleinen Geräten mit schmalen Viewports, was das Design für verschiedene Höhen relevanter denn je macht. Anthony Colangelo beschreibt, wie Apple das height-Media-Feature sinnvoll einsetzt, um die Größe des Hero-Images anzupassen, wenn sich die Höhe des Viewports ändert.

Responsive (fluide) Typografie

Weitere Infos

Eine Schriftart kann entweder zu groß oder zu klein wirken, abhängig von der Größe des Bildschirms, auf dem sie angezeigt wird. Wenn wir auf einem kleinen Bildschirm arbeiten, werden wir wahrscheinlich eine kleinere Schrift verwenden wollen als auf einem viel größeren Bildschirm.

Die Idee hier ist, dass wir die Breite des Browsers nutzen, um die Schriftgröße zu skalieren. Wir legen eine Standard-Schriftgröße für <html> fest, die als „kleine“ Schriftgröße fungiert, und definieren dann über eine Media Query eine weitere Schriftgröße, die als „große“ Schriftgröße dient. Dazwischen? Wir legen die Schriftgröße erneut fest, aber innerhalb einer anderen Media Query, die eine Größe basierend auf der Browserbreite berechnet.

Das Schöne daran ist, dass sich die Schriftgröße an die Browserbreite anpassen kann, aber niemals bestimmte Größen über- oder unterschreitet. Es gibt jedoch dank neuerer CSS-Funktionen wie min(), max() und clamp() einen viel einfacheren Weg, der ganz ohne Media Queries auskommt.

Größere Touch-Ziele bereitstellen, wenn Geräte einen `coarse`-Pointer haben

Weitere Infos

Haben Sie jemals eine Website mit super winzigen Buttons besucht? Einige von uns haben breite Finger, was es schwierig macht, ein Objekt genau zu treffen, ohne versehentlich etwas anderes anzutippen.

Sicher können wir uns auf das width-Feature verlassen, um zu sehen, ob wir es mit einem kleinen Bildschirm zu tun haben. Aber wir können auch erkennen, ob das Gerät in der Lage ist, über Elementen zu schweben (Hover). Wenn nicht, ist es wahrscheinlich ein Touch-Gerät oder vielleicht ein Gerät, das beides unterstützt, wie das Microsoft Surface.

Die obige Demo nutzt Checkboxen als Beispiel. Checkboxen können auf kleinen Bildschirmen mühsam anzutippen sein, daher erhöhen wir die Größe und verzichten auf einen Hover-Effekt, wenn das Gerät keine hover-Events unterstützt.

Auch hier gilt: Dieser Ansatz ist nicht immer präzise. Lesen Sie dazu Patrick Laukkes ausführlichen Artikel, der potenzielle Probleme bei der Arbeit mit hover, pointer, any-hover und any-pointer aufzeigt.

Spezifikationen

Media Queries Level 4 (Candidate Recommendation)
Media Queries Level 5 (Working Draft)

Besonderer Dank geht an Sarah Rambacher, die bei der Überprüfung dieses Leitfadens geholfen hat.

Arul

# 3. Oktober 2020

Ich habe vor kurzem gelernt, dass addListener veraltet ist und wir stattdessen addEventListener verwenden sollten.

Lucy Kuijk

# 6. Oktober 2020

Vielen Dank für deine exzellente Erklärung. Bei der Implementierung ist mir ein fehlendes „.matches“ nach „if ( mediaQuery“ in deinem Javascript-Beispiel aufgefallen.
// Prüfen, ob die Media Query zutrifft
if ( mediaQuery ) {
// Dann folgende Nachricht in die Konsole ausgeben
console.log(‘Media Query Matched!’)
}

Dieser Kommentar-Editor erlaubt es mir nicht, meinen Kommentar so zu formatieren, wie ich es gerne hätte.
Das hier hat bei mir funktioniert
// Prüfen, ob die Media Query zutrifft
if ( mediaQuery.matches ) {
// Dann folgende Nachricht in die Konsole ausgeben
console.log(‘Media Query Matched!’)
}

if (mediaQuery.matches)

Onaolapo Olufowokan

# 24. November 2020

Danke dafür!

havajsky

# 10. Mai 2021

Der Untertitel
„@media screen (min-width: 320px) and (max-width: 768px)“
in „Anatomie einer Media Query“ ist irreführend.
Laut der Syntax bei MDN sollte nach „screen“ ein „and“ stehen, du solltest es also vielleicht korrigieren zu: „@media screen and (min-width: 320px) and (max-width: 768px)“.

Tzoor Rozental

# 14. Juni 2021

Du kannst einen Link zu https://caniuse.com/mdn-css_at-rules_media_range_syntax am Ende des Abschnitts https://css-tricks.de/a-complete-guide-to-css-media-queries/#using-min-and-max-to-match-value-ranges hinzufügen.

Benny

# 18. November 2022

Danke, ich dachte eigentlich schon, dass Media Queries langsam unwichtig werden... da das Ideal in der Webentwicklung ja immer ist, dem nächsten großen Trend zu folgen..

Verwendung von Media Queries

Anatomie einer Media Query

Viewport/Seiteneigenschaften

Anzeigequalität

Farbe

Interaktion

Video-Präfix

Scripting

Benutzereinstellungen

Veraltet (Deprecated)

and

or (oder Komma-getrennt)

not

Brauchen Sie wirklich CSS Media Queries?

Wertebereiche abgleichen

Verschachtelung und komplexe Entscheidungsfindung

Barrierefreiheit (Accessibility)

prefers-reduced-motion

prefers-contrast

inverted-colors

prefers-color-scheme

Was liegt vor uns?

Media-Features für Benutzereinstellungen

Erkennung einer erzwungenen Farbpalette

Erkennung von maximaler Helligkeit, Farbtiefe und Kontrastverhältnis

Features mit Video-Präfix

Browser-Unterstützung

Anmerkung zu Container Queries

Desktop

Mobil / Tablet

Beispiele

Layout an verschiedene Viewport-Breiten anpassen

Dark Mode

Erkennung von Orientierung, Hover und Bewegung in einer responsiven Kartengalerie

Ein iPhone im Querformat anvisieren

Sticky Header für große Viewports anwenden

Responsive (fluide) Typografie

Größere Touch-Ziele bereitstellen, wenn Geräte einen coarse-Pointer haben

Spezifikationen

Kommentare

`and`

`or` (oder Komma-getrennt)

`not`

`prefers-reduced-motion`

`prefers-contrast`

`inverted-colors`

`prefers-color-scheme`

Größere Touch-Ziele bereitstellen, wenn Geräte einen `coarse`-Pointer haben