JavaScript MediaQueryList API

MediaQueryList-Objekt

MediaQueryList Das Objekt speichert Informationen aus den Medienabfragen

MediaQueryList Das Objekt istFensterobjektAttribute.

MediaQueryList Das Objekt kann auf die folgenden Weise zugegriffen werden:

window.matchMedia() oder nur matchMedia():

Beispiel

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Probieren Sie es selbst aus

Siehe auch:

window.matchMedia() Methode

MediaQueryList-Eigenschaft

Eigenschaft Beschreibung
matches Boolscher Wert. Wenn das Dokument mit der Abfrage übereinstimmt, dann true, sonst false
media Zeichenfolgenwert. Medienabfrage (Liste)

MediaQueryList-Methode

Methode Beschreibung
addListener() Fügt eine neue Listener-Funktion hinzu, die jedes Mal ausgeführt wird, wenn sich das Ergebnis der Medienabfrage ändert
removeListener()

Entfernt die zuvor hinzugefügte Listener-Funktion aus der Medienabfrage-Liste

Führt keine Aktion aus, wenn der angegebene Listener nicht in der Liste ist

Media-Abfrage

matchMedia() Die Methoden der Medienabfrage können sein CSS @media-Regel jegliche Media-Attribute, wie z.B. min-height, min-width, orientation

Beispiel

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Probieren Sie es selbst aus

Medientyp

Wert Beschreibung
all Standard. Für alle Medienartgeräte
print Für Drucker
screen Für Computerbildschirme, Tablets, Smartphones und ähnliches
speech Der für das laute "Lesen" der Seite vorgesehene Bildschirmleser

Media-Attribute

Wert Beschreibung
any-hover Gibt es irgendein verfügbares Eingabemechanismus, der es dem Benutzer ermöglicht, den Mauszeiger über einem Element zu lassen?
(Hinzugefügt in Media Queries Level 4).
any-pointer Gibt es irgendein verfügbares Eingabemechanismus, der ein Zeigegerät ist, und wenn ja, wie genau ist es?
(Hinzugefügt in Media Queries Level 4).
aspect-ratio Das Breitenausmaß des Ansichtsfensters
color Die Anzahl der Bits pro Farbkomponente des Ausgabegeräts
color-gamut Die ungefähre Farbreichweite, die von Benutzeragenten und Ausgabegeräten unterstützt wird
Ob das Haupteingabegerät es dem Benutzer ermöglicht, den Cursor über dem Element zu lassen?
Anzahl der Farben, die das Gerät anzeigen kann. color-index
Anzahl der Farben, die das Gerät anzeigen kann. grid
Ist das Gerät ein Raster oder ein Bitmap? height
Höhe des Viewports. hover
Ob das Haupteingabegerät es dem Benutzer ermöglicht, den Cursor über dem Element zu lassen?
(Hinzugefügt in Media Queries Level 4). inverted-colors
(Hinzugefügt in Media Queries Level 4).
Ob der Browser oder die unterliegende Betriebssystemfarben umkehrt? light-level
Aktuelle Lichtstärke des Umgebungslichts (hinzugefügt in Media Queries Level 4). Maximales Breitenausgabeverhältnis des Anzeigebereichs.
max-color Maximale Anzahl der Bits für jeden Farbwert des Ausgabegeräts.
max-color-index Maximale Anzahl der Farben, die das Gerät anzeigen kann.
max-height Maximale Höhe des Anzeigebereichs, z.B. des Browserfensters.
max-monochrome Maximale Anzahl der Bits für jede "Farbe" auf monochromen (Graustufen) Geräten.
max-resolution Maximale Auflösung des Geräts, angegeben in dpi oder dpcm.
max-width Maximale Breite des Anzeigebereichs, z.B. des Browserfensters.
min-aspect-ratio Minimale Breitenausgabeverhältnis des Anzeigebereichs.
min-color Minimale Anzahl der Bits für jeden Farbwert des Ausgabegeräts.
min-color-index Minimale Anzahl der Farben, die das Gerät anzeigen kann.
min-height Minimale Höhe des Anzeigebereichs, z.B. des Browserfensters.
min-monochrome Minimale Anzahl der Bits für jede "Farbe" auf monochromen (Graustufen) Geräten.
min-resolution Minimale Auflösung des Geräts, angegeben in dpi oder dpcm.
min-width Minimale Breite des Anzeigebereichs, z.B. des Browserfensters.
monochrome Anzahl der Bits für jede "Farbe" auf monochromen (Graustufen) Geräten.
orientation Richtung des Viewports (horizontales oder vertikales Modus).
overflow-block Wie behandelt das Ausgabegerät den Inhalt, der entlang der Blockachse aus dem Viewport herausgeht (hinzugefügt in Media Queries Level 4)?
overflow-inline Kann der Inhalt, der entlang der Inline-Achse aus dem Viewport herausgeht, gescrollt werden (hinzugefügt in Media Queries Level 4)?
pointer Ist das Haupteingabegerät ein Zeigergerät? Wenn ja, wie hoch ist seine Genauigkeit?
(Hinzugefügt in Media Queries Level 4).
resolution Auflösung des Ausgabegeräts, angegeben in dpi oder dpcm.
scan Scannen des Ausgabegeräts.
scripting Kann Skript (z.B. JavaScript) verwendet werden? (hinzugefügt in Media Queries Level 4)
update Wie schnell kann das Aussehen des Inhalts durch das Ausgabegerät geändert werden (hinzugefügt in Media Queries Level 4).
width Viewport-Breite.