MediaQueryList: media-Eigenschaft

Die schreibgeschützte media-Eigenschaft der MediaQueryList-Schnittstelle ist ein String, der eine serialisierte Medienabfrage darstellt.

Wert

Ein String, der eine serialisierte Medienabfrage darstellt.

Beispiele

Dieses Beispiel führt die Medienabfrage (width <= 600px) aus und zeigt den Wert der resultierenden MediaQueryList-media-Eigenschaft in einem <span> an.

JavaScript

let mql = window.matchMedia("(width <= 600px)");
document.querySelector(".mq-value").innerText = mql.media;

Der JavaScript-Code übergibt die Medienabfrage, die abgeglichen werden soll, an matchMedia(), um sie zu kompilieren, und setzt dann die innerText des <span> auf den Wert der media-Eigenschaft des Ergebnisses.

HTML

<span class="mq-value"></span>

Ein <span>, um die Ausgabe zu erhalten.

.mq-value {
 font:
 18px "Arial",
 sans-serif;
 font-weight: bold;
 color: #8888ff;
 padding: 0.4em;
 border: 1px solid #ddddee;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Medienabfragen
• Verwendung von Medienabfragen im Code
• window.matchMedia()
• MediaQueryList
• MediaQueryListEvent