Media Queries

Media Queries ermöglichen es, CSS-Regeln abhängig von gerätespezifischen Attributen (Bildschirmgrösse, Pixeldichte), Ausgabegerät (Bildschirm, Drucker) oder Sensordaten des Geräts (Lichtsensor, ist es hell oder dunkel?) zu definieren.

Allgemeine Deklaration

@media <filter> {
    /**
     * Diese Regeln sind nur dann aktiv, wenn der
     * <filter> auf das Gerät des Besuchers zutrifft.
     */
}

Medien-Typen

Um einzelne Medien-Typen zu filtern, kann all, screen, print oder speech (spezielle Styles für Screenreader) verwendet werden.

body {
    background: red;
}

/**
 * Beim Ausdrucken der Website soll der Seitenhintergrund
 * nicht rot sein.
 */
@media print {
    body {
        background: none;
    }
}

Medien-Features

Media Queries lassen sich auf diverse Features anwenden. Eine Liste aller verfügbarer Features befindet sich hier: developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features.

Die Syntax setzt sich zusammen aus (feature-name: Wert).

Fensterbreite: min-width / max-width

Die mit Abstand am meisten verwendeten Features sind min-width und max-width. Damit kannst du dein Layout dynamisch auf die Bildschirmgrösse von Desktops, Tablets und Smartphones anpassen.

.container {
    width: 1200px;
}

/**
 * Sobald das Browserfenster weniger Breit wird als
 * 1200px, soll der Container nur noch 600px Breit sein.
 */
@media (min-width: 1200px) {
    .container {
        width: 600px;
    }
}

Achtung: Gerade wenn es um die Bildschirmbreite geht möchte man diese oft nur für Bildschirme anwenden, nicht etwa wenn die Website ausgedruckt wird. Aus diesem Grund macht es Sinn im Filter zwei Features mit dem and Operator zu verketten.

@media screen and (min-width: 1200px) {
    /** 
     * Diese Styles werden garantiert nur bei der Anzeige
     * auf Bildschirmen angewendet.
     */
}

Verkettung mehrerer Bedingungen

Wie schon bei @media screen and (min-width: 1200px) kann ich auch mehrere Bedingungen verknüpfen, z.B. um nur bestimmte Fensterbreiten anzusprechen:

@media screen and (min-width: 800px) and (max-width: 1199px) {
    /** 
     * Diese Styles werden garantiert nur bei der Anzeige
     * auf Bildschirmen angewendet.
     */
}

Fensterbreite: Media Query Range Syntax

Seit 2023 können auch Vergleichs-Operatoren genutzt werden, sog. media query range features:

/* statt (max-width: 1199px): */
@media (width < 1200px) {
  /* … */
}
@media (width => 1200px) {
  /* … */
}

Damit können auch Bereiche einfach abgefragt werden:

/* statt screen and (max-width: 800px) and (max-width: 1199px): */
@media screen and (800px <= width < 1200px) {
  /* … */
}

Ausrichtung: Hoch- / Querformat

Wenn ich wissen will, ob ein Bildschirm im Hoch- oder Querformat benutzt wird, kann ich dies abfragen:

@media screen and (orientation: landscape) { /* Oder portrait für Hochformat */
  /* Styling für querformat */
}

Das eher unüblich, öfter wird einfach die Fensterbreite (min-width/max-width) abgefragt.

Helligkeit: light-level

Mit der CSS Media Queries Level 4 Spezifikation wurden viele neue Features eingeführt. Achtung: Manche davon werden momentan noch nicht in allen Browsern unterstützt.

body {
    background: white;
    color: black;
}

@media (light-level: dim) {
    /**
     * Bei dunkeln Lichtverhältnissen soll der Website-Hintergrund
     * zu schwarz wechseln.
     */
    body {
        background: black;
        color: white;
    }
}