w3docs logo

CSS-Regel @media

Die @media at-Regel definiert einen Satz von Stilen, die nur auf bestimmte Mediatypen angewendet werden.

Mediaanfragen sind eine beliebte Technik, um ein ansprechendes Webdesign für Desktops, Laptops, Tablets und Mobiltelefone bereitzustellen.

Neben den Mediatypen gibt es Mediamerkmale, die Namen haben und bestimmte Werte wie Eigenschaften akzeptieren. Es gibt jedoch Unterschiede zwischen Eigenschaften und Mediaeigenschaften:

  • Die Eigenschaften können nicht ohne Werte angezeigt werden, und Merkmale benötigen keine Werte.
  • Die Merkmale akzeptieren nur einen Einzelwert im Gegensatz zu Eigenschaften.

Die Mediaabfragen werden verwendet, um Folgendes zu überprüfen:

  • Die Breite und Höhe des Ansichtsfensters
  • Die Breite und Höhe des Geräts
  • Orientierung
  • Auflösung
Anfangswert all
Gilt für Bestimmte Mediatypen
Geerbt Nein
Animierbar Ja
Version Media Queries, CSS2
DOM Syntax object.style.@media = "screen and (min-width: 500px)";

Syntax

@media: media-type (and media-query-feature);

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background-color: #1c87c9;
      }
      @media screen and (max-width: 411px) {
      body {
      background-color: #cce5ff;
      }
      }
      @media screen and (min-width: 768px) {
      body {
      background-color: #eee;
      }
      }
      @media screen and (max-width: 962px) and (min-width: 450px), (min-width: 1366px) {
      background-color: #333;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für @media</h2>
    <p>Ändern Sie die Größe des Browsers, um den Effekt zu sehen.</p>
    <p>Mediaabfragen stellen die Hintergrundfarbe auf hellgrau ein, wenn das Ansichtsfenster 600 Pixel breit oder breiter ist, auf grün, wenn das Ansichtsfenster zwischen 200 und 599 Pixel breit ist. Wenn das Ansichtsfenster kleiner als 200 Pixel ist, ist die Hintergrundfarbe blau.</p>
  </body>
</html>

Im folgenden Beispiel, wenn die Breite des Browsers zwischen 500 und 800px oder über 1000px liegt, ändert sich das Erscheinungsbild des Tages <div>. Ändern Sie die Größe des Browserfensters, um den Effekt zu sehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      background-color: #1c87c9;
      }
      @media screen and (min-width: 200px) {
      body {
      background-color: #8ebf42;
      }
      }
      @media screen and (min-width: 600px) {
      body {
      background-color: #ccc;
      }
      }
      @media screen and (max-width: 800px) and (min-width: 500px), (min-width: 1000px) {
      div.box {
      font-size: 50px;
      padding: 50px;
      border: 8px solid #000;
      background: #eee;
      }
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für @media</h2>
    <p>Mediaqueries stellt die Hintergrundfarbe auf grau, wenn das Ansichtsfenster 600 Pixel breit oder breiter ist, auf grün, wenn das Ansichtsfenster zwischen 200 und 599 Pixel breit ist. Wenn das Ansichtsfenster kleiner als 200 Pixel ist, ist die Hintergrundfarbe blau.</p>
    <h3>Ändern Sie das Aussehen von DIV für verschiedene Bildschirmgrößen.</h3>
    <div class="box">DIV</div>
  </body>
</html>

Media-Typen

Werte Beschreibung
all Dieser Wert wird für alle Geräte verwendet. Das ist der Standardwert dieser Eigenschaft.
print Wird für Drucker verwendet.
screen Wird für Farb-Computerbildschirme verwendet.
speech Wird für Lautsprecher verwendet.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Media-Eigenschaften

Werte Beschreibung
width Die Breite des Ansichtsfensters. css2
height Die Höhe des Ansichtsfensters.
orientation Die Höhe des Ansichtsfensters.
scan Das Scannen des Ansichtsfensters.
aspect-ratio Das Verhältnis des Wertes der Mediafunktion "width" zum Wert der Medienfunktion "height".
grid Frägt ab, ob das Ausgabegerät ein Gitter oder eine Bitmap ist.
color Anzahl der Bits pro Farbkomponente der Ausgabevorrichtung. Wenn das Gerät nicht farbig ist, ist der Wert 0.
color-gamut Der ungefähre Farbumfang, der vom Benutzeragenten und der Ausgabevorrichtung unterstützt wird.
color-index Definiert die Anzahl der Einträge in der Farbnachschlagetabelle des Ausgabegeräts. Wenn das Gerät keine Farbsuche verwendet, ist der Wert 0.
inverted-colors Frägt ab, ob der Browser oder das zugrunde liegende Betriebssystem Farben invertiert oder nicht.
hover Abfrage, ob der primäre Eingabemechanismus es dem Benutzer erlaubt, über Elemente zu fahren oder nicht.
any-hover Frägt ab, ob der verfügbare Eingabemechanismus es dem Benutzer erlaubt, über Elemente zu fahren oder nicht.
any-pointer Frägt ab, ob der verfügbare Eingabemechanismus eine Zeigevorrichtung ist oder nicht.
light-level Die Lichtverhältnisse in der Umgebung.
max-aspect-ratio Das maximale Verhältnis zwischen der Breite und der Höhe der Anzeigefläche.
max-color Die maximale Anzahl von Bits pro Farbkomponente für die Ausgabevorrichtung.
max-color-index Die maximale Anzahl der Farben für die Anzeige.
max-height Die maximale Höhe der Anzeigefläche.
max-monochrome Die maximale Anzahl von Bits pro Farbe auf einem monochromen Gerät.
max-resolution Die maximale Auflösung des Gerätes.
max-width Die maximale Breite des Anzeigebereichs.
min-aspect-ratio Das Mindestverhältnis zwischen der Breite und der Höhe der Anzeigefläche.
min-color Die minimale Anzahl von Bits pro Farbkomponente für die Ausgabevorrichtung.
min-color-index Die minimale Anzahl von Farben für die Anzeige.
min-height Die minimale Höhe der Anzeigefläche.
min-monochrome Die minimale Anzahl von Bits pro Farbe auf einem monochromen Gerät.
min-resolution Die minimale Auflösung des Gerätes.
min-width Die minimale Breite des Anzeigebereichs.
monochrome Definiert die Anzahl der Bits pro Pixel in einem monochromen Frame-Puffer. Wenn es sich bei dem Gerät nicht um ein monochromes Gerät handelt, ist der Wert 0.
orientation Die Ausrichtung des Ansichtsfensters.
overflow-block Frägt ab, wie die Ausgabevorrichtung mit Inhalten umgeht, die das Ansichtsfenster entlang der Blockachse überlaufen.
overflow-inline Fragt, ob der Inhalt, der das Ansichtsfenster entlang der Inline-Achse überläuft, gescrollt werden kann oder nicht.
pointer Frägt ab, ob der primäre Eingabemechanismus eine Zeigevorrichtung ist oder nicht.
resolution Beschreibt die Auflösung des Ausgabegeräts.
scripting Frägt ab, ob das Scripting verfügbar ist oder nicht.
update Frägt ab, wie schnell das Ausgabegerät das Aussehen des Inhalts ändern kann.

Browser-Support

chrome edge firefox safari opera
1.0+ ✓ 1.0+ 1.3+ 9.2+

Übe dein Wissen

Was ist der Zweck von CSS Mediaregeln?
Finden Sie das nützlich?