@media
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Die @media
CSS At-Regel kann verwendet werden, um Teile eines Stylesheets basierend auf dem Ergebnis einer oder mehrerer Media Queries anzuwenden. Damit können Sie eine Media Query und einen CSS-Block spezifizieren, der auf das Dokument angewendet wird, wenn und nur wenn die Media Query mit dem Gerät übereinstimmt, auf dem der Inhalt verwendet wird.
Hinweis:
In JavaScript können die mit @media
erstellten Regeln über das CSSMediaRule
CSS-Objektmodell-Interface abgerufen werden.
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 oberster Ebene Ihres Codes platziert oder in jede andere bedingte Gruppierung von At-Regeln verschachtelt werden.
Für eine Diskussion der Syntax von Media Queries, siehe Using 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ätes.
Ohne die Verwendung des logischen Operators only
ist der Medientyp optional, und der Typ all
wird impliziert.
all
-
Geeignet für alle Geräte.
print
-
Vorgesehen für bedruckte Materialien und Dokumente, die im Druckvorschau-Modus auf einem Bildschirm angezeigt werden. (Siehe paged media für Informationen zu spezifischen Formatierungsproblemen.)
screen
-
Hauptsächlich für Bildschirme gedacht.
Hinweis:
CSS2.1 und Media Queries 3 definierten mehrere zusätzliche Medientypen (tty
, tv
, projection
, handheld
, braille
, embossed
und aural
), aber sie wurden in Media Queries 4 als veraltet markiert und sollten nicht verwendet werden.
Media-Features
Ein <media-feature>
beschreibt spezifische Eigenschaften des User-Agenten, des Ausgabegeräts oder der Umgebung.
Media-Feature-Ausdrücke testen deren Vorhandensein, Wert oder Wertebereich und sind völlig optional. Jeder Media-Feature-Ausdruck muss von Klammern umgeben sein.
any-hover
-
Erlaubt irgendein verfügbares Eingabegerät, dass der Benutzer über Elemente hovert?
any-pointer
-
Ist irgendein verfügbares Eingabegerät ein Zeigegerät und wenn ja, wie genau ist es?
aspect-ratio
-
Breite-Höhe-Verhältnis aspect ratio des Ansichtsfensters.
color
-
Anzahl der Bits pro Farbkomponente des Ausgabegeräts oder null, wenn das Gerät nicht farbig arbeitet.
color-gamut
-
Ungefähre Farbpalette, die vom User-Agenten und dem Ausgabegerät unterstützt wird.
color-index
-
Anzahl der Einträge in der Farbabgleichstabelle des Ausgabegeräts oder null, wenn das Gerät keine solche Tabelle verwendet.
device-aspect-ratio
-
Breite-Höhe-Verhä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, also 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 fullscreen oder picture-in-picture Modus. Hinzugefügt in Media Queries Level 5.
dynamic-range
-
Kombination von Helligkeit, Kontrastverhältnis und Farbtiefe, die vom User-Agenten und dem Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Level 5.
forced-colors
-
Ermittelt, ob der User-Agent die Farbpalette beschränkt. Hinzugefügt in Media Queries Level 5.
grid
-
Verwendet das Gerät ein Raster- oder Bitmapscreen?
height
-
Höhe des Ansichtsfensters.
hover
-
Erlaubt der primäre Eingabemechanismus, dass der Benutzer über Elemente hovert?
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 Monochrom-Frame-Buffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom arbeitet.
orientation
-
Ausrichtung des Ansichtsfensters.
overflow-block
-
Wie behandelt das Ausgabegerät Inhalte, die entlang der Blockachse über das Ansichtsfenster hinausgehen?
overflow-inline
-
Kann Inhalt, der entlang der Inline-Achse über das Ansichtsfenster hinausgeht, gescrollt werden?
pointer
-
Ist der primäre Eingabemechanismus ein Zeigegerät, und wenn ja, wie genau ist es?
prefers-color-scheme
-
Ermittelt, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. Hinzugefügt in Media Queries Level 5.
prefers-contrast
-
Ermittelt, ob der Benutzer das System aufgefordert hat, den Kontrast zwischen angrenzenden Farben zu erhöhen oder zu verringern. Hinzugefügt in Media Queries Level 5.
prefers-reduced-data
-
Ermittelt, ob der Benutzer Webinhalte angefordert hat, die weniger Internetverkehr verbrauchen.
prefers-reduced-motion
-
Der Benutzer bevorzugt weniger Bewegung auf der Seite. Hinzugefügt in Media Queries Level 5.
prefers-reduced-transparency
-
Ermittelt, ob ein Benutzer eine Einstellung auf seinem Gerät aktiviert hat, um Transparenz- oder Transparenzeffekte zu reduzieren.
resolution
-
Pixeldichte des Ausgabegeräts.
scan
-
Ob die Anzeige progressiv oder interlaced ist.
scripting
-
Ermittelt, ob Skripting (d.h. JavaScript) verfügbar ist. Hinzugefügt in Media Queries Level 5.
shape
-
Ermittelt die Form des Geräts, um zwischen rechteckigen und runden Displays zu unterscheiden.
update
-
Wie häufig das Ausgabegerät das Erscheinungsbild von Inhalten ändern kann.
video-dynamic-range
-
Kombination von Helligkeit, Kontrastverhältnis und Farbtiefe, die von der Videofläche des User-Agenten 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 das
resolution
-Feature mit derdppx
Einheit stattdessen. -webkit-animation
-
Der Browser unterstützt
-webkit
-präsierte CSSanimation
. Verwenden Sie die@supports (animation)
-Feature-Abfrage stattdessen. -webkit-device-pixel-ratio
-
Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie das
resolution
-Feature mit derdppx
Einheit stattdessen. -webkit-transform-2d
-
Der Browser unterstützt
-webkit
-präsierte 2D CSStransform
. Verwenden Sie die@supports (transform)
-Feature-Abfrage stattdessen. -webkit-transform-3d
-
Der Browser unterstützt
-webkit
-präsierte 3D CSStransform
. Verwenden Sie die@supports (transform)
-Feature-Abfrage stattdessen. -webkit-transition
-
Der Browser unterstützt
-webkit
-präsierte CSStransition
. Verwenden Sie die@supports (transition)
-Feature-Abfrage stattdessen.
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 in einer einzigen Regel kombinieren, indem Sie sie mit Kommas trennen.
and
-
Wird zur Kombination mehrerer Media-Features zu einer einzigen Media Query verwendet, wobei jede verknüpfte Funktion
true
zurückgeben muss, damit die Abfragetrue
ist. Es wird auch zum Verknüpfen von Media-Features mit Medientypen verwendet. not
-
Wird verwendet, um eine Media Query zu negieren und
true
zurückzugeben, wenn die Abfrage ansonstenfalse
wäre. Wenn es in einer durch Kommas getrennten Liste von Abfragen vorhanden ist, wird es nur die spezifische Abfrage negieren, auf die es angewendet wird.Hinweis: In Level 3 kann das Schlüsselwort
not
nicht verwendet werden, um einen einzelnen Media-Feature-Ausdruck zu negieren, sondern nur eine gesamte Media Query. only
-
Wendet einen Stil nur an, wenn eine gesamte Abfrage zutrifft. Es ist nützlich, um zu verhindern, dass ältere Browser ausgewählte Stile anwenden. Wenn
only
nicht verwendet wird, interpretieren ältere Browser die Abfragescreen and (width <= 500px)
alsscreen
, ignorieren den Rest der Abfrage und wenden die Stile auf alle Bildschirme an. Wenn Sie denonly
-Operator verwenden, müssen Sie auch einen Medientyp angeben. ,
(Komma)-
Kommas werden verwendet, um mehrere Media Queries in eine einzige Regel zu kombinieren. Jede Abfrage in einer durch Kommas getrennten Liste wird von den anderen separat behandelt. Wenn also eine der Abfragen in einer Liste
true
ist, gibt die gesamte Media-Anweisungtrue
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 entsprechende User-Agent-Client-Hints.
Dies sind HTTP-Header, die Inhalte anfordern, die vorab für die jeweilige Medienanforderung optimiert sind.
Dazu gehören Sec-CH-Prefers-Color-Scheme
und Sec-CH-Prefers-Reduced-Motion
.
Formale Syntax
@media =
@media <media-query-list> { <rule-list> }
Barrierefreiheit
Um Menschen, die die Textgröße einer Website anpassen, bestmöglich entgegenzukommen, verwenden Sie em
s, wenn Sie eine <length>
in Ihren Media Queries benötigen.
Sowohl em
als auch px
sind gültige Einheiten, aber em
funktioniert besser, wenn der Benutzer die Browsertextgröße ändert.
Berücksichtigen Sie auch Media Queries oder HTTP-User-Agent-Client-Hints, um das Benutzererlebnis zu verbessern.
Beispielsweise kann die Media Query prefers-reduced-motion
oder der äquivalente HTTP-Header Sec-CH-Prefers-Reduced-Motion
verwendet werden, um die Menge an Animation oder Bewegung basierend auf den Benutzereinstellungen zu minimieren.
Sicherheit
Da Media Queries Einblicke in die Fähigkeiten — und damit auch in die Funktionen und das Design — des Geräts liefern, mit dem der Benutzer arbeitet, besteht die Möglichkeit, dass sie missbraucht werden könnten, um einen "Fingerabdruck" zu erstellen, der das Gerät identifiziert oder es zumindest in einer Weise kategorisiert, die für Benutzer möglicherweise unerwünscht ist.
Aufgrund dieses Potenzials könnte ein Browser beschließen, die zurückgegebenen Werte in irgendeiner Weise zu verändern, 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; beispielsweise berichten viele Media Queries in Firefox, wenn die Einstellung "Resist Fingerprinting" aktiviert ist, Standardwerte anstelle von Werten, die den tatsächlichen Gerätestand repräsentieren.
Beispiele
Testen von Print- und Bildschirm-Medientypen
@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 von Features, die einen Bereich akzeptieren, wie in den folgenden Beispielen gezeigt:
@media (height > 600px) {
body {
line-height: 1.4;
}
}
@media (400px <= width <= 700px) {
body {
line-height: 1.4;
}
}
Für weitere Beispiele siehe bitte Using media queries.
Spezifikationen
Specification |
---|
Media Queries Level 4 # media-descriptor-table |
CSS Conditional Rules Module Level 3 # at-media |