MediaQueryList: media-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die media-Eigenschaft der Schnittstelle MediaQueryList ist eine schreibgeschützte Zeichenkette, die eine serialisierte Media Query darstellt.

Wert

Eine Zeichenkette, die eine serialisierte Media Query darstellt.

Beispiele

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

JavaScript

let mql = window.matchMedia("(width <= 600px)");

document.querySelector(".mq-value").innerText = mql.media;

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

HTML

html

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

Ein <span>, um die Ausgabe zu empfangen.

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

Ergebnis

Spezifikationen

Specification
CSSOM View Module # dom-mediaquerylist-media

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden