@media

Probieren Sie es aus

abbr {
  color: #860304;
  font-weight: bold;
  transition: color 0.5s ease;
}

@media (hover: hover) {
  abbr:hover {
    color: #001ca8;
    transition-duration: 0.5s;
  }
}

@media not all and (hover: hover) {
  abbr::after {
    content: " (" attr(title) ")";
  }
}

<p>
  <abbr title="National Aeronautics and Space Administration">NASA</abbr> is a
  U.S. government agency that is responsible for science and technology related
  to air and space.
</p>

Syntax

/* At the top level of your code */
@media screen and (width >= 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (width >= 900px) {
    article {
      display: flex;
    }
  }
}

Die @media At-Regel kann entweder auf höchster Ebene Ihres Codes platziert oder innerhalb jeder anderen bedingten Gruppenregel verschachtelt werden.

Für eine Diskussion der Media Query-Syntax lesen Sie bitte den Abschnitt Verwenden von Media Queries.

Beschreibung

Eine Media Query's <media-query-list> umfasst <media-type>s, <media-feature>s und logische Operatoren.

Medientypen

Ein <media-type> beschreibt die allgemeine Kategorie eines Geräts. Außer bei der Verwendung des logischen Operators only ist der Medientyp optional und der Typ all wird implizit angenommen.

all

Geeignet für alle Geräte.

print

Vorgesehen für seitenorientierte Materialien und Dokumente, die auf einem Bildschirm im Druckvorschau-Modus angezeigt werden. (Bitte sehen Sie sich paged media für Informationen über spezifische Formatierungsprobleme an.)

screen

Hauptsächlich für Bildschirme vorgesehen.

Medienmerkmale

Ein <media feature> beschreibt spezifische Merkmale des User Agents, Ausgabegeräts oder der Umgebung. Medienmerkmal-Ausdrücke testen deren Existenz, Wert oder Wertebereich und sind völlig optional. Jedes Medienmerkmal muss mit Klammern umschlossen sein.

any-hover

Erlaubt es irgendein verfügbares Eingabegerät dem Benutzer, über Elemente zu schweben?

any-pointer

Ist irgendein verfügbares Eingabegerät ein Zeigegerät, und wenn ja, wie genau ist es?

aspect-ratio

Breiten-zu-Höhen-Seitenverhältnis des Ansichtsfensters.

color

Anzahl der Bits pro Farbkomponente des Ausgabegeräts, oder null, wenn das Gerät keine Farben unterstützt.

color-gamut

Ungefähre Farbpalette, die vom User Agent und dem Ausgabegerät unterstützt wird.

color-index

Anzahl der Einträge in der Farb-Nachschlagetabelle des Ausgabegeräts oder null, wenn das Gerät keine solche Tabelle verwendet.

device-aspect-ratio

Breiten-zu-Höhen-Seitenverhältnis des Ausgabegeräts. Veraltet in Media Queries Level 4.

device-height

Höhe der Rendering-Oberfläche des Ausgabegeräts. Veraltet in Media Queries Level 4.

device-posture

Ermittelt die aktuelle Haltung des Geräts, d.h. ob das Ansichtsfenster flach oder gefaltet ist. Definiert in der Device Posture API.

device-width

Breite der Rendering-Oberfläche des Ausgabegeräts. Veraltet in Media Queries Level 4.

display-mode

Der Modus, in dem eine Anwendung angezeigt wird: zum Beispiel Vollbild oder Bild-in-Bild-Modus. Hinzugefügt in Media Queries Level 5.

dynamic-range

Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die von User Agent und Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Level 5.

forced-colors

Überprüft, ob der User Agent die Farbpalette einschränkt. Hinzugefügt in Media Queries Level 5.

grid

Verwendet das Gerät einen Raster- oder einen Bitmap-Bildschirm?

height

Höhe des Ansichtsfensters.

horizontal-viewport-segments

Erkennt, ob das Gerät eine bestimmte Anzahl von Ansichtsfenstersegmenten horizontal anordnet.

hover

Erlaubt das primäre Eingabegerät dem Benutzer, über Elemente zu schweben?

inverted-colors

Invertiert der User Agent oder das zugrunde liegende Betriebssystem die Farben? Hinzugefügt in Media Queries Level 5.

monochrome

Bits pro Pixel im monochromen Framebuffer des Ausgabegeräts, oder null, wenn das Gerät nicht monochrom ist.

orientation

Ausrichtung des Ansichtsfensters.

overflow-block

Wie behandelt das Ausgabegerät den Inhalt, der das Ansichtsfenster entlang der Blockachse überläuft?

overflow-inline

Kann Inhalt, der das Ansichtsfenster entlang der Inline-Achse überläuft, gescrollt werden?

pointer

Ist das primäre Eingabegerät ein Zeigegerät und wenn ja, wie genau ist es?

prefers-color-scheme

Erkennt, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. Hinzugefügt in Media Queries Level 5.

prefers-contrast

Erkennt, ob der Benutzer das System gebeten hat, den Kontrast zwischen angrenzenden Farben zu erhöhen oder zu verringern. Hinzugefügt in Media Queries Level 5.

prefers-reduced-data

Erkennt, ob der Benutzer gebeten hat, Webinhalte zu konsumieren, die weniger Internetverkehr nutzen.

prefers-reduced-motion

Der Benutzer bevorzugt weniger Bewegung auf der Seite. Hinzugefügt in Media Queries Level 5.

prefers-reduced-transparency

Erkennt, ob ein Benutzer eine Einstellung auf seinem Gerät aktiviert hat, um die Effekte transparenter oder durchscheinender Schichten zu reduzieren, die auf dem Gerät verwendet werden.

resolution

Pixeldichte des Ausgabegeräts.

scan

Ob die Bildausgabe progressiv oder interlaced erfolgt.

scripting

Erkennt, ob Skripting (d.h. JavaScript) verfügbar ist. Hinzugefügt in Media Queries Level 5.

shape

Erkennt die Form des Geräts, um rechteckige und runde Bildschirme zu unterscheiden.

update

Wie häufig kann das Ausgabegerät das Erscheinungsbild des Inhalts ändern.

vertical-viewport-segments

Erkennt, ob das Gerät eine bestimmte Anzahl von Ansichtsfenstersegmenten vertikal anordnet. Hinzugefügt in Media Queries Level 5.

video-dynamic-range

Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die von der Videoebene des User Agents und dem Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Level 5.

width

Breite des Ansichtsfensters einschließlich der Breite der Bildlaufleiste.

-moz-device-pixel-ratio

Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie stattdessen das resolution Merkmal mit der dppx Einheit.

-webkit-animation

Der Browser unterstützt -webkit-präfixierte CSS animation. Verwenden Sie stattdessen die @supports (animation) Merkmal-Abfrage.

-webkit-device-pixel-ratio

Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie stattdessen das resolution Merkmal mit der dppx Einheit.

-webkit-transform-2d

Der Browser unterstützt -webkit-präfixierte 2D CSS transform. Verwenden Sie stattdessen die @supports (transform) Merkmal-Abfrage.

-webkit-transform-3d

Der Browser unterstützt -webkit-präfixierte 3D CSS transform. Verwenden Sie stattdessen die @supports (transform) Merkmal-Abfrage.

-webkit-transition

Der Browser unterstützt -webkit-präfixierte CSS transition. Verwenden Sie stattdessen die @supports (transition) Merkmal-Abfrage.

Logische Operatoren

Die logischen Operatoren not, and, only und or können verwendet werden, um eine komplexe Media Query zu erstellen. Sie können auch mehrere Media Queries zu einer einzigen Regel zusammenfassen, indem Sie sie durch Kommas trennen.

and

Wird verwendet, um mehrere Medienmerkmale in einer einzigen Media Query zu kombinieren, wobei jedes verbundene Merkmal true zurückgeben muss, damit die Abfrage true ist. Es wird auch verwendet, um Medienmerkmale mit Medientypen zu verbinden.

not

Wird verwendet, um eine Media Query zu negieren, die true zurückgibt, wenn die Abfrage ansonsten false zurückgeben würde. Bei einer kommagetrennten Liste von Abfragen wird nur die spezielle Abfrage negiert, auf die es angewendet wird.

Hinweis: In Level 3 kann das Schlüsselwort not nicht verwendet werden, um einen einzelnen Medienmerkmal-Ausdruck zu negieren, sondern nur eine gesamte Media Query.

only

Wendet einen Stil nur an, wenn eine gesamte Abfrage übereinstimmt. Es ist nützlich, um zu verhindern, dass ältere Browser ausgewählte Stile anwenden. Wenn only nicht verwendet wird, interpretieren ältere Browser die Abfrage screen and (width <= 500px) als screen und ignorieren den Rest der Abfrage, wodurch ihre Stile auf allen Bildschirmen angewendet werden. Wenn Sie den Operator only verwenden, müssen Sie auch einen Medientyp angeben.

, (Komma)

Kommas werden verwendet, um mehrere Media Queries in einer einzigen Regel zu kombinieren. Jede Abfrage in einer kommagetrennten Liste wird von den anderen separat behandelt. Wenn also eine der Abfragen in einer Liste true ist, gibt die gesamte Medienregel true zurück. Mit anderen Worten, Listen verhalten sich wie ein logischer or Operator.

or

Entspricht dem , Operator. Hinzugefügt in Media Queries Level 4.

User-Agent-Client-Hinweise

Einige Media Queries haben entsprechende User-Agent-Client-Hinweise. Diese sind HTTP-Header, die Inhalte anfordern, die vorab für die speziellen Medienanforderungen optimiert sind. Sie umfassen Sec-CH-Prefers-Color-Scheme und Sec-CH-Prefers-Reduced-Motion.

Formale Syntax

@media = 
  @media <media-query-list> { <rule-list> }  

Barrierefreiheit

Um Personen, die die Textgröße einer Website anpassen, bestmöglich zu unterstützen, verwenden Sie ems, wenn Sie eine \<length> für Ihre Media Queries benötigen.

Sowohl em als auch px sind gültige Einheiten, aber em funktioniert besser, wenn der Benutzer die Browsertextgröße ändert.

Erwägen Sie auch, Media Queries oder HTTP-User-Agent-Client-Hinweise zu verwenden, um die Benutzererfahrung zu verbessern. Zum Beispiel kann die Media Query prefers-reduced-motion oder der entsprechende HTTP-Header Sec-CH-Prefers-Reduced-Motion verwendet werden, um die Menge an Animationen oder Bewegungen basierend auf den Benutzerpräferenzen zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten—und damit in die Merkmale und das Design—des Geräts liefern können, mit dem der Benutzer arbeitet, besteht das Potenzial, dass sie missbraucht werden könnten, um einen "Fingerabdruck" zu konstruieren, der das Gerät identifiziert oder es zumindest bis zu einem gewissen Grad ungewollt kategorisiert.

Aufgrund dieses Potenzials kann ein Browser sich dafür entscheiden, die zurückgegebenen Werte in gewisser Weise zu verfälschen, um zu verhindern, dass sie zur präzisen Identifizierung eines Computers verwendet werden. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; zum Beispiel, wenn die "Fingerprinting resistent"-Einstellung von Firefox aktiviert ist, melden viele Media Queries Standardwerte anstelle der Werte, die den tatsächlichen Gerätezustand darstellen.

Beispiele

Testen von Print- und Bildschirmmedientypen

@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

Die Bereichssyntax ermöglicht weniger ausführliche Media Queries, wenn jedes Feature akzeptierende Bereiche getestet werden, wie in den unten stehenden Beispielen gezeigt:

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

Für mehr Beispiele siehe Verwenden von Media Queries.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS Media Queries Modul
• Verwenden von Media Queries
• CSSMediaRule Schnittstelle
• Erweiterte Mozilla-Medienmerkmale
• Erweiterte WebKit-Medienmerkmale