MediaQueryList: media-Eigenschaft

Ein String, der eine serialisierte Media-Query darstellt.

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

let mql = window.matchMedia("(max-width: 600px)");

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

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

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

Ein einfaches <span>, um die Ausgabe zu erhalten.

.mq-value {
  font:
    18px arial,
    sans-serif;
  font-weight: bold;
  color: #88f;
  padding: 0.4em;
  border: 1px solid #dde;
}

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