W3docs
de
Anmelden

CSS @media-Regel

Mit der @media-Regel Stile basierend auf Media Queries anwenden. Lernen Sie die Verwendung anhand von Beispielen.

Die @media-Regel wendet einen Stilblock nur dann an, wenn eine Media Query den Wert true ergibt — zum Beispiel nur bei Bildschirmen, die schmaler als ein Smartphone sind, oder nur wenn ein Dokument gedruckt wird. Sie ist die Grundlage des Responsive Webdesigns: Ein einziges Stylesheet, das sich an Desktops, Laptops, Tablets und Mobiltelefone anpasst, anstatt für jedes Gerät eine separate Website bereitzustellen.

Diese Seite behandelt die @media-Syntax, die verfügbaren Media Types und Media Features, die Verknüpfung von Bedingungen mit logischen Operatoren sowie ausführbare Beispiele, deren Effekte Sie durch Ändern der Fenstergröße beobachten können.

Aufbau einer Media Query

Eine Media Query besteht aus zwei Teilen:

  • Einem optionalen Media Type — all, print, screen oder speech — der eine Gerätekategorie anspricht.
  • Einem oder mehreren Media Features in Klammern, wie (min-width: 768px), die eine Bedingung prüfen, etwa die width des viewport, seine height, Ausrichtung oder Auflösung.

Wenn der Media Type mit dem aktuellen Gerät übereinstimmt und jedes Feature den Wert true ergibt, werden die Stile im Block angewendet. Ein Media Feature sieht aus wie eine CSS-Eigenschaft (name: value), prüft jedoch eine Bedingung, anstatt ein Element direkt zu gestalten.

Wann würde ich das verwenden? Immer dann, wenn sich Layout, Abstände oder Sichtbarkeit je nach Gerät ändern sollen — Spalten auf Smartphones stapeln, eine Seitenleiste auf kleinen Bildschirmen ausblenden oder Hintergrundfarben beim Drucken einer Seite entfernen.

In JavaScript repräsentiert das CSSMediaRule-Interface eine einzelne @media-Regel und kann verwendet werden, um mit @media erstellte Regeln zu lesen oder zu ändern.

Syntax

CSS @media

@media <media-query> {
  /* styles */
}

Media Queries können mehrere Bedingungen mithilfe logischer Operatoren kombinieren: and, not, only und ein Komma (,).

Beispiel der @media-Regel:

CSS @media code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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) {
        body {
          background-color: #333;
        }
      }
    </style>
  </head>
  <body>
    <h2>@media rule example</h2>
    <p>Resize the browser to see the effect.</p>
    <p>The background color changes based on the viewport width: light blue for screens up to 411px, light gray for 768px and wider, and dark gray for screens between 450px and 962px, or 1366px and wider.</p>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS @media mehrere Queries

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

Beispiel der @media-Regel mit geändertem Erscheinungsbild von <div>:

CSS @media multiple queries example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</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>@media rule example</h2>
    <p>Media queries set the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
    <h3>Change the appearance of DIV on different screen sizes</h3>
    <div class="box">DIV</div>
  </body>
</html>
Probier es selbst »

Bedingungen mit logischen Operatoren kombinieren

Media Queries können mehrere Bedingungen verknüpfen:

  • and — alle Bedingungen müssen zutreffen: @media screen and (min-width: 768px).
  • , (Komma) — wirkt wie or; die Stile werden angewendet, wenn irgendeine kommagetrennte Query zutrifft: @media (max-width: 600px), (min-width: 1200px).
  • not — negiert eine gesamte Query: @media not all and (monochrome).
  • only — verbirgt die Query vor sehr alten Browsern, die Media Features nicht verstehen; in modernen Browsern hat es keinen Effekt, schadet aber nicht.

Media Types

WertBeschreibung
allDieser Wert wird für alle Geräte verwendet. Dies ist der Standardwert dieser Eigenschaft.
printWird für Drucker verwendet.
screenWird für Farbbildschirme verwendet.
speechWird für Sprachausgabe verwendet.

Beispiel zur Verwendung von media zum Ausblenden eines Elements auf sehr kleinen Geräten:

CSS @media Rule

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <style>
      @media (max-width: 767px) {
        .hide-mobile {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h1>Hi</h1>
    <p>There is some text for example.</p>
    <p class="hide-mobile">This text will be hidden on large devices.</p>
    <p>There is some text for example.</p>
  </body>
</html>
Probier es selbst »

Beispiel zur Verwendung von media zum Ändern der Hintergrundfarbe des Inhalts auf verschiedenen Geräten.

CSS @media Rule

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @media screen and (max-width: 767px) {
        .content {
          background-color: lightblue;
          padding: 30px;
        }
      }
      @media screen and (min-width: 768px) {
        .content {
          background-color: pink;
          padding: 10px;
        }
      }
      @media screen and (min-width: 800px) {
        .content {
          background-color: lightgreen;
          color: white;
          padding: 50px;
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h2>Resize the browser to see the effect.</h2>
      <p>
        CSS is a rule-based language, which means that you define
        rules specifying groups of styles applying to particular
        elements or groups of elements on the web page.
      </p>
    </div>
  </body>
</html>
Probier es selbst »

Media Features

Media Features prüfen eine bestimmte Eigenschaft des Geräts oder viewport. Bei weitem am häufigsten im alltäglichen Responsive Design sind width-basierte Features — min-width und max-width — aber die vollständige Liste unten deckt alles ab, von der Geräteausrichtung bis hin zu Farbtiefe und Eingabemechanismus. Bereichs-Features (width, height, aspect-ratio, color, resolution, monochrome) akzeptieren auch min-- und max--Präfixe.

WertBeschreibung
widthDie Breite des viewport.
heightDie Höhe des viewport.
orientationDie Ausrichtung des viewport.
aspect-ratioDas Verhältnis des Werts des Media Features "width" zum Wert des Media Features "height".
gridPrüft, ob das Ausgabegerät ein Raster- oder Bitmap-Gerät ist.
colorDie Anzahl der Bits pro Farbkomponente des Ausgabegeräts. Wenn das Gerät kein Farbgerät ist, ist der Wert 0.
color-gamutDer ungefähre Bereich der Farben, die vom User-Agent und Ausgabegerät unterstützt werden.
inverted-colorsPrüft, ob der Browser oder das zugrundeliegende Betriebssystem Farben invertiert oder nicht.
hoverPrüft, ob der primäre Eingabemechanismus dem Benutzer erlaubt, über Elemente zu hovern oder nicht.
any-hoverPrüft, ob der verfügbare Eingabemechanismus dem Benutzer erlaubt, über Elemente zu hovern oder nicht.
any-pointerPrüft, ob der verfügbare Eingabemechanismus ein Zeigegerät ist oder nicht.
light-levelDer Umgebungslichtstärke.
max-aspect-ratioDas maximale Verhältnis zwischen Breite und Höhe des Anzeigebereichs.
max-colorDie maximale Anzahl von Bits pro Farbkomponente für das Ausgabegerät.
max-heightDie maximale Höhe des Anzeigebereichs.
max-monochromeDie maximale Anzahl von Bits pro Farbe auf einem Monochrom-Gerät.
max-resolutionDie maximale Auflösung des Geräts.
max-widthDie maximale Breite des Anzeigebereichs.
min-aspect-ratioDas minimale Verhältnis zwischen Breite und Höhe des Anzeigebereichs.
min-colorDie minimale Anzahl von Bits pro Farbkomponente für das Ausgabegerät.
min-heightDie minimale Höhe des Anzeigebereichs.
min-monochromeDie minimale Anzahl von Bits pro Farbe auf einem Monochrom-Gerät.
min-resolutionDie minimale Auflösung des Geräts.
min-widthDie minimale Breite des Anzeigebereichs.
overflow-blockPrüft, wie das Ausgabegerät Inhalte behandelt, die den viewport entlang der Blockachse überlaufen.
overflow-inlinePrüft, ob Inhalte, die den viewport entlang der Inline-Achse überlaufen, gescrollt werden können oder nicht.
pointerPrüft, ob der primäre Eingabemechanismus ein Zeigegerät ist oder nicht.
resolutionBeschreibt die Auflösung des Ausgabegeräts.
scriptingPrüft, ob Scripting verfügbar ist oder nicht.
updatePrüft, wie schnell das Ausgabegerät das Erscheinungsbild des Inhalts ändern kann.

Übungen

Übung
Was sind die Funktionen von Media Queries in CSS?
Was sind die Funktionen von Media Queries in CSS?
Was this page helpful?