Die@mediaCSSAt-Regel kann verwendet werden, um Teile eines Stylesheets basierend auf dem Ergebnis einer oder mehrererMedia Queries anzuwenden. Mit ihr spezifizieren Sie eine Media Query und einen Block von CSS, der auf das Dokument angewendet werden soll, aber nur dann, wenn die Media Query mit dem Gerät übereinstimmt, auf dem der Inhalt angezeigt wird.

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 auf der obersten Ebene Ihres Codes oder innerhalb jeder anderen bedingten Gruppenregel verschachtelt platziert werden.

Für eine Diskussion der Media Query-Syntax sehen Sie bitteVerwendung von Media Queries.

Beschreibung

Eine Media Query enthält in ihrer<media-query-list><media-type>s,<media-feature>s undlogische Operatoren.

Medientypen

Ein<media-type> beschreibt die allgemeine Kategorie eines Geräts.Außer wenn der logische Operatoronly verwendet wird, ist der Medientyp optional und der Typall wird impliziert.

all

Geeignet für alle Geräte.

print

Bestimmt für paginiertes Material und Dokumente, die in der Druckvorschau auf einem Bildschirm angezeigt werden. (Bitte sehen Siepaginierte Medien für Informationen zu Formatierungsproblemen, die spezifisch für diese Formate sind.)

screen

Hauptsächlich für Bildschirme bestimmt.

Medienmerkmale

Ein<media feature> beschreibt spezifische Eigenschaften desUser-Agent, des Ausgabegeräts oder der Umgebung.Medienmerkmal-Ausdrücke testen auf ihre Präsenz, ihren Wert oder ihren Wertebereich und sind vollkommen optional. Jeder Medienmerkmal-Ausdruck muss von Klammern umgeben sein.

any-hover

Ermöglicht ein verfügbares Eingabegerät dem Benutzer, über Elemente zu schweben?

any-pointer

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

aspect-ratio

Breite-zu-Höhe-Seitenverhältnis des Viewports.

color

Anzahl der Bits pro Farbkomponente des Ausgabegeräts oder null, wenn das Gerät keine Farbe verwendet.

color-gamut

Ungefähres Farbspektrum, das vom User-Agent und Ausgabegerät unterstützt wird.

color-index

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

device-aspect-ratio

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

device-height

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

device-posture

Erkennt die aktuelle Haltung des Geräts, das heißt, ob sich der Viewport in einem flachen oder gefalteten Zustand befindet. Definiert in derDevice Posture API.

device-width

Breite der Zeichenoberfläche des Ausgabegeräts. Veraltet in Media Queries Level 4.

display-mode

Der Modus, in dem eine Anwendung angezeigt wird: zum BeispielVollbildmodus oderPicture-in-Picture-Modus.Hinzugefügt in Media Queries Level 5.

dynamic-range

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

forced-colors

Erkennen, ob der User-Agent die Farbpalette einschränkt.Hinzugefügt in Media Queries Level 5.

grid

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

height

Höhe des Viewports.

horizontal-viewport-segments

Erkennt, ob das Gerät über eine bestimmte Anzahl von horizontal angeordneten Viewport-Segmenten verfügt.

hover

Ermöglicht das primäre Eingabegerät dem Benutzer, über Elemente zu schweben?

inverted-colors

Invertieren der User-Agent oder das zugrundeliegende Betriebssystem Farben?Hinzugefügt in Media Queries Level 5.

monochrome

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

orientation

Ausrichtung des Viewports.

overflow-block

Wie behandelt das Ausgabegerät Inhalte, die den Viewport entlang der Blockachse überschreiten?

overflow-inline

Kann Inhalt, der den Viewport entlang der Inline-Achse überschreitet, gescrollt werden?

pointer

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

prefers-color-scheme

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

prefers-contrast

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

prefers-reduced-data

Erkennt, ob der Benutzer Inhalte bevorzugt, die weniger Internetverkehr erfordern.

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 auf dem Gerät verwendeten transparenten oder transluzenten Schichteffekte zu reduzieren.

resolution

Pixeldichte des Ausgabegeräts.

scan

Ob die Anzeigeausgabe progressiv oder interlaced ist.

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 Displays zu unterscheiden.

update

Wie häufig das Ausgabegerät das Erscheinungsbild von Inhalten ändern kann.

vertical-viewport-segments

Erkennt, ob das Gerät über eine bestimmte Anzahl von vertikal angeordneten Viewport-Segmenten verfügt. Hinzugefügt in Media Queries Level 5.

video-dynamic-range

Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, unterstützt durch die Videoebene des User-Agent und des Ausgabegeräts. Hinzugefügt in Media Queries Level 5.

width

Breite des Viewports einschließlich der Breite der Scrollleiste.

-moz-device-pixel-ratio

Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie stattdessen dasresolution-Merkmal mit derdppx-Einheit.

-webkit-animation

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

-webkit-device-pixel-ratio

Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie stattdessen dasresolution-Merkmal mit derdppx-Einheit.

-webkit-transform-2d

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

-webkit-transform-3d

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

-webkit-transition

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

Logische Operatoren

Dielogischen Operatorennot,and,only undor können verwendet werden, um eine komplexe Media Query zu erstellen.Sie können auch mehrere Media Queries in einer einzigen Regel kombinieren, indem Sie sie mit Kommata trennen.

and

Wird verwendet, um mehrere Medienmerkmale in einer einzigen Media Query zu kombinieren, wobei jedes verknüpfte Merkmaltrue zurückgeben muss, damit die Abfragetrue ist.Es wird auch zum Verbinden von Medienmerkmalen mit Medientypen verwendet.

not

Wird verwendet, um eine Media Query zu negieren, wobeitrue zurückgegeben wird, wenn die Abfrage ansonstenfalse wäre.Wenn es in einer kommagetrennten Liste von Abfragen vorhanden ist, wird es nur die spezifische Abfrage negieren, auf die es angewendet wird.

Hinweis:In Level 3 kann dasnot-Schlüsselwort 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.Wennonly nicht verwendet wird, würden ältere Browser die Abfragescreen and (width <= 500px) alsscreen interpretieren, den Rest der Abfrage ignorieren und ihre Stile auf alle Bildschirme anwenden.Wenn Sie denonly-Operator 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 getrennt von den anderen behandelt.Daher gilt: Wenn eine der Abfragen in einer Listetrue ist, gibt die gesamte Medienanweisungtrue zurück.Mit anderen Worten, Listen verhalten sich wie ein logischeror-Operator.

or

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

User Agent Client Hints

Einige Media Queries haben entsprechendeUser Agent Client Hints.Dies sind HTTP-Header, die Inhalte anfordern, die vorab für die jeweilige Medienanforderung optimiert sind.Sie beinhaltenSec-CH-Prefers-Color-Scheme undSec-CH-Prefers-Reduced-Motion.

Formale Syntax

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

Barrierefreiheit

Um Menschen, die die Textgröße einer Website anpassen, am besten gerecht zu werden, verwenden Sieem, wenn Sie eine<length> für IhreMedia Queries benötigen.

Sowohlem als auchpx sind gültige Einheiten, aberem funktioniert besser, wenn der Benutzer die Textgröße des Browsers verändert.

Betrachten Sie auch Media Queries oderHTTP User Agent Client Hints, um das Nutzererlebnis zu verbessern.Zum Beispiel kann die Media Queryprefers-reduced-motion oder der entsprechende HTTP-HeaderSec-CH-Prefers-Reduced-Motion) verwendet werden, um die beim Nutzerpräferenzen verwendete Animations- oder Bewegungsmenge zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten – und indirekt in die Funktionen und das Design – des Geräts geben, das der Benutzer verwendet, besteht das Potenzial, dass sie missbraucht werden könnten, um einen"Fingerabdruck" zu erstellen, der das Gerät identifiziert oder es zumindest in einem unerwünschten Maße für Benutzer kategorisiert.

Aufgrund dieses Potenzials könnte ein Browser entscheiden, die zurückgegebenen Werte in irgendeiner Weise zu verfälschen, um zu verhindern, dass sie zur präzisen Identifizierung eines Rechners verwendet werden. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich bieten; zum Beispiel, wenn die Firefox-Einstellung "Fingerprinting entgegenwirken" aktiviert ist, geben viele Media Queries Standardwerte zurück, anstatt Werte, die den tatsächlichen Gerätestatus darstellen.

Beispiele

Testen für Druck- 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 beim Testen für jede Funktion, die einen Bereich akzeptiert, 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 weitere Beispiele siehe bitteVerwendung von Media Queries.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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