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 schreibgeschützte Eigenschaft des MediaQueryList-Interface ist ein String, der eine serialisierte Media Query darstellt.

Wert

Ein String, der eine serialisierte Media Query darstellt.

Beispiele

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

JavaScript

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

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

Der JavaScript-Code übergibt die Media Query zu match in 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 erhalten.

.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