Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/de/docs/Web/API/Window/matchMedia below:

Window: matchMedia()-Methode - Web-APIs | MDN

Baseline Widely available

Die matchMedia()-Methode der Schnittstelle Window gibt ein neues MediaQueryList-Objekt zurück, das dann verwendet werden kann, um festzustellen, ob das document dem Media Query-String entspricht, sowie um das Dokument zu überwachen, um zu erkennen, wann es diesen Media Query erfüllt (oder nicht mehr erfüllt).

matchMedia(mediaQueryString)

mediaQueryString

Ein String, der den zu parsenden Media Query in ein MediaQueryList angibt.

Genau wie in CSS muss jede Media-Funktion innerhalb des Ausdrucks in Klammern gesetzt werden. Zum Beispiel: matchMedia("(width <= 600px)") oder matchMedia("(orientation: landscape)") funktionieren, während matchMedia("width < 600px") oder matchMedia("orientation: landscape") nicht funktionieren. Schlüsselwörter für Medientypen (all, print, screen) und logische Operatoren (and, or, not, only) müssen nicht in Klammern gesetzt werden.

Ein neues MediaQueryList-Objekt für den Media Query. Verwenden Sie die Eigenschaften und Ereignisse dieses Objekts, um Übereinstimmungen zu erkennen und Änderungen dieser Übereinstimmungen im Laufe der Zeit zu überwachen.

Sie können den zurückgegebenen Media Query verwenden, um sowohl sofortige als auch ereignisgesteuerte Überprüfungen durchzuführen, um festzustellen, ob das Dokument dem Media Query entspricht.

Um eine einmalige, sofortige Überprüfung durchzuführen, ob das Dokument dem Media Query entspricht, achten Sie auf den Wert der matches-Eigenschaft, die true sein wird, wenn das Dokument die Anforderungen des Media Query erfüllt.

Wenn Sie ständig darüber informiert werden müssen, ob das Dokument dem Media Query entspricht oder nicht, können Sie stattdessen das change-Ereignis überwachen, das an das Objekt übermittelt wird. Es gibt ein gutes Beispiel dafür im Artikel zu Window.devicePixelRatio.

Dieses Beispiel führt den Media Query (width <= 600px) aus und zeigt den Wert der matches-Eigenschaft des resultierenden MediaQueryList in einem <span> an. Das Ergebnis wird daher "true" anzeigen, wenn das Ansichtsfenster kleiner oder gleich 600 Pixel breit ist, und "false", wenn das Fenster breiter ist.

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

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

Der JavaScript-Code übergibt den Media Query, der in matchMedia() übereinstimmen soll, um ihn zu kompilieren, und setzt dann die innerText des <span> auf den Wert der matches-Eigenschaft der Ergebnisse, sodass angezeigt wird, ob das Dokument im Moment des Ladens der Seite dem Media Query entspricht.

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

Ein einfaches <span> für die Ausgabe.

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

Siehe Media Queries programmgesteuert testen für zusätzliche Codebeispiele.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4