CSS @media Regel

Definition und Verwendung

@media Regeln werden in Media Queries verwendet, um unterschiedliche Stile für verschiedene Mediengattungen/Geräte anzuwenden.

Media Queries können zur Überprüfung vieler Dinge verwendet werden, wie z.B.:

  • Breite und Höhe des Viewports
  • Breite und Höhe des Geräts
  • Richtung (ist das Telefon oder das Tablet in Landscape- oder Portraitmodus?)
  • Auflösung

Die Verwendung von Media Queries ist eine beliebte Technologie, um benutzerdefinierte Stile für Desktop-Computer, Laptops, Tablets und Smartphones bereitzustellen (Responsive Web Design).

Sie können auch Media Queries verwenden, um bestimmte Stile nur für Druckdokumente oder Screen Reader anzuwenden (mediatype: print, screen oder speech).

Neben den Mediengattungen gibt es auch Media-Attribute. Media-Attribute bieten durch die Möglichkeit, spezifische Eigenschaften von Benutzeragenten oder Displaygeräten zu testen, zusätzliche spezifische Details für Media Queries. Zum Beispiel können Sie Stile nur auf Bildschirmen mit einer bestimmten Breite anwenden.

Siehe auch:

CSS-Tutorial:CSS Medienabfrage

CSS-Tutorial:CSS-Media Queries-Beispiel

RWD-Tutorial:Responsive Web Design durch Media Queries umsetzen

JavaScript-Referenzhandbuch:window.matchMedia() Methode

Beispiel

Beispiel 1

Wenn die Breite des Browserfensters 600px oder weniger beträgt, ändert die <body>-Elementfarbe in „hellblau":

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Versuchen Sie es selbst

Mehr TIY-Beispiele finden Sie unten auf der Seite.

CSS-Syntax

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Bedeutung von not, only und and:

not: Der not-Schlüssel kehrt die Bedeutung der gesamten Medienabfrage um.

only: Der only-Schlüssel verhindert, dass veraltete Browser bestimmte Stile anwenden, die nicht media-attribute unterstützen. Er hat keinen Einfluss auf moderne Browser.

und: Der und-Schlüssel kombiniert Media-Attribute mit Mediengattungen oder anderen Media-Attribute.

Sie sind optional. Wenn jedoch not oder only verwendet wird, muss auch der Mediengattung angegeben werden.

Sie können auch unterschiedliche Stile für verschiedene Medien verwenden, wie zum Beispiel:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Medientyp

Wert Beschreibung
all Standard. Für alle Mediengerätetypen.
print Für Drucker.
screen Für Computerbildschirme, Tablets, Smartphones und ähnliches.
speech Für Screenreader, die Seiten zum Vorlesen verwenden.

Media-Attribute

Wert Beschreibung
any-hover

Gibt es irgendein verfügbares Eingabemechanismus, der es dem Benutzer ermöglicht, auf Elemente zu hovering (z.B. Maus)?

Wurde in Media Queries Level 4 hinzugefügt.
any-pointer

Gibt es unter den verfügbaren Eingabemechanismen irgendwelche Zeigegeräte, und wenn ja, wie hoch ist ihre Genauigkeit?

Wurde in Media Queries Level 4 hinzugefügt.
aspect-ratio Das Breitenaufhöhenverhältnis des Viewports (Ansichtsbereichs).
color

Die Bitzahl pro Pixel des Ausgabegeräts, häufig 8, 16, 32 Bit.

Wird das Gerät keine Farbausgabe unterstützen, dann ist dieser Wert 0.
color-gamut

Der大约 von Benutzeragent und Ausgabegerät unterstützte Farbraum.

Wurde in Media Queries Level 4 hinzugefügt.
color-index

Die Anzahl der Einträge in der Farbsuchtabelle (color lookup table) des Ausgabegeräts.

Wird der Gerät keine Farbsuchtabelle verwendet, dann ist dieser Wert 0.
device-aspect-ratio

Das Breitenaufhöhenverhältnis des Ausgabegeräts.

Wird in Media Queries Level 4 abgekündigt.
device-height

Die Höhe der Renderfläche des Ausgabegeräts (z.B. des Bildschirms).

Wird in Media Queries Level 4 abgekündigt.
device-width

Die Breite der Renderfläche des Ausgabegeräts (z.B. des Bildschirms).

Wird in Media Queries Level 4 abgekündigt.
display-mode

Der Anzeigemodus der Anwendung, wie durch den Member "display" im Manifest einer Web App spezifiziert.

Wird in der Web App Manifest spec definiert.
forced-colors

Ob der Benutzeragent die Palette einschränkt.

Wurde in Media Queries Level 5 hinzugefügt.
grid Ob das Ausgabegerät ein rasterbasiertes oder ein punktabhängiges Display verwendet?
height Die Höhe des Viewports (Ansichtsbereichs).
hover

Ob das Haupteingabemechanismus es dem Benutzer erlaubt, den Cursor über einem Element zu lassen?

Wurde in Media Queries Level 4 hinzugefügt.
inverted-colors

Ob das Browser oder das unterliegende Betriebssystem die Farben umgekehrt hat.

Wurde in Media Queries Level 5 hinzugefügt.
light-level

Der aktuelle Lichtpegel der Umgebung.

Wurde in Media Queries Level 5 hinzugefügt.
max-aspect-ratio Das maximale Verhältnis von Breite zu Höhe des Anzeigebereichs.
max-color Die maximale Anzahl von Bits für jeden Farbkomponenten der Ausgabegeräte.
max-color-index Die maximale Anzahl der Farben, die das Gerät anzeigen kann.
max-height Die maximale Höhe des Anzeigebereichs, z.B. des Browserfensters.
max-monochrome Die maximale Anzahl von Bits für jede "Farbe" auf monochromen (Graustufen) Geräten.
max-resolution Die maximale Auflösung des Geräts, angegeben in dpi oder dpcm.
max-width Das maximale Breite des Anzeigebereichs, z.B. des Browserfensters.
min-aspect-ratio Das minimale Verhältnis von Breite zu Höhe des Anzeigebereichs.
min-color Die minimale Anzahl von Bits für jeden Farbkomponenten der Ausgabegeräte.
min-color-index Die minimale Anzahl der Farben, die das Gerät anzeigen kann.
min-height Die minimale Höhe des Anzeigebereichs, z.B. des Browserfensters.
min-monochrome Die minimale Anzahl von Bits für jede "Farbe" auf monochromen (Graustufen) Geräten.
min-resolution Niedrigste Auflösung des Geräts, die in dpi oder dpcm angegeben wird.
min-width Mindestbreite des Anzeigebereichs, z.B. das Browserfenster.
monochrome

Bitdepth pro Pixel im monochromen Framebuffer des Ausgabegeräts.

Wenn das Gerät kein Schwarz-Weiß-Bildschirm ist, beträgt der Wert 0.
orientation Richtung der Rotation des Viewports (Landschafts- oder Portraitmodus).
overflow-block

Wie behandelt das Ausgabegerät den Inhalt, der über den Block-Axen hinausgeht, im Viewport (viewport)?

Wurde in Media Queries Level 4 hinzugefügt.
overflow-inline

Kann der Inhalt, der über den Inline-Axen hinausgeht, im Viewport (viewport) gescrollt werden?

Wurde in Media Queries Level 4 hinzugefügt.
pointer

Ist das Haupteingabegerät ein Zeigergerät? Wenn ja, wie hoch ist seine Genauigkeit?

Wurde in Media Queries Level 4 hinzugefügt.
prefers-color-scheme

Ob der Benutzer helle oder dunkle Farbschemata bevorzugt.

Wurde in Media Queries Level 5 hinzugefügt.
prefers-contrast

Erkennen Sie, ob der Benutzer die Helligkeit oder Dunkelheit der Farbschemata bevorzugt.

Wurde in Media Queries Level 5 hinzugefügt.
prefers-reduced-motion

Ob der Benutzer weniger dynamische Effekte auf der Seite haben möchte.

Wurde in Media Queries Level 5 hinzugefügt.
prefers-reduced-transparency

Ob der Benutzer eine geringere Transparenz bevorzugt.

Wurde in Media Queries Level 5 hinzugefügt.
resolution Auflösung des Ausgabegeräts, die in dpi oder dpcm angegeben wird.
scan Der Scanvorgang des Ausgabegeräts (z.B. Fernseher).
scripting

Erkennen Sie, ob Skripts (z.B. JavaScript) verfügbar sind.

Wurde in Media Queries Level 5 hinzugefügt.
update

Häufigkeit, mit der das Rendering der aktualisierten Inhalte des Ausgabegeräts aktualisiert wird.

Wurde in Media Queries Level 4 hinzugefügt.
width Breite des Viewports (viewport).

Mehr Beispiele

Beispiel 2

Verbergen Sie Elemente, wenn die Breite des Browsers 600px oder weniger beträgt:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Versuchen Sie es selbst

Beispiel 3

Wenn die Breite des Viewports 800 Pixel oder breiter ist, verwenden Sie die Media Queries, um die Hintergrundfarbe auf Lavendelblau zu setzen; wenn die Breite des Viewports zwischen 400 und 799 Pixel liegt, verwenden Sie die Media Queries, um die Hintergrundfarbe auf Hellgrün zu setzen. Wenn das Viewport kleiner als 400 Pixel ist, ist die Hintergrundfarbe Hellblau:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: hellgrün;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavendel;
  }
}

Versuchen Sie es selbst

Beispiel 4

Erstellen Sie eine responsive Navigationsmenü (horizontal auf großen Bildschirmen angezeigt, vertikal auf kleinen Bildschirmen angezeigt):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Versuchen Sie es selbst

Beispiel 5

Verwenden Sie Medienabfragen, um eine responsive Spaltenlayout zu erstellen:

/* Wechseln Sie von vier Spalten zu zwei Spalten, wenn die Breite 992px oder kleiner ist */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* Stack die Spalten übereinander, wenn die Breite kleiner oder gleich 600 Pixel ist, anstatt nebeneinander zu legen */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Versuchen Sie es selbst

Beispiel 6

Verwenden Sie Medienabfragen, um eine responsives Webseiten zu erstellen:

Versuchen Sie es selbst

Beispiel 7

Medienabfragen können auch verwendet werden, um die Seitenausrichtung basierend auf der Richtung des Browsers zu ändern. Sie können eine Gruppe von CSS-Eigenschaften schreiben, die nur dann gelten, wenn die Breite des Browserfensters größer als die Höhe ist (d.h. Querformat).

Verwenden Sie einen hellblauen Hintergrund, wenn die Richtung im Querformat liegt:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Versuchen Sie es selbst

Beispiel 8

Stellen Sie die Textfarbe mit Medienabfragen so ein, dass sie grün ist, wenn das Dokument auf dem Bildschirm angezeigt wird, und schwarz, wenn es gedruckt wird:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

Versuchen Sie es selbst

Beispiel 9

Liste durch Komma getrennt: Fügen Sie eine weitere Medienabfrage zu einer bestehenden Medienabfrage hinzu, indem Sie Kommas verwenden (verhält sich wie der OR-Operator):

/* Ändern Sie das Erscheinungsbild des <div>, wenn die Breite zwischen 600px und 900px liegt oder größer als 1100px ist */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Versuchen Sie es selbst

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browserversion hin, die @media-Regeln vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9