So verwenden Sie Medienabfragen in JavaScript mit MatchMedia

Kernpunkte

• Die ursprünglich für das reaktionsschnellen Design in CSS verwendeten Medienabfragen können auch in JavaScript verwendet werden, um Inhalte oder Funktionen basierend auf Geräteeigenschaften wie Bildschirmgröße, Auflösung und Ausrichtung anzupassen.
• Die window.matchMedia API in JavaScript ermöglicht die Erkennung von CSS3 -Medienabfrage -Statusänderungen. Es gibt ein MediaQueryList -Objekt zurück, mit dem festgestellt werden kann, ob eine bestimmte Medienabfrage mit dem aktuellen Gerät übereinstimmt, und einen Ereignishörer als Antwort auf Änderungen hinzufügen.
• JavaScript -Medienabfragen werden in modernen Browsern häufig unterstützt und bieten eine zuverlässige Möglichkeit, reaktionsschnelle Designs zu erstellen. Sie können in Verbindung mit CSS -Medienabfragen verwendet werden, und verschiedene Bibliotheken wie Enquire.js und MatchMedia.js können den Prozess des Schreibens und Verwaltens dieser Abfragen vereinfachen.

Dieser Artikel wurde 2011 geschrieben und 2018 aktualisiert. Als Responsive Design zum ersten Mal eingeführt wurde, war es eines der aufregendsten Konzepte des Web -Layouts, seit CSS das Repräsentationsgitter einnahm. Die zugrunde liegende Technologie verwendet Medienabfragen, um den Typ, die Breite, die Höhe, die Ausrichtung, die Auflösung, das Seitenverhältnis und die Farbtiefe der Betrachtungsgeräte zu bestimmen, um unterschiedliche Stilblätter bereitzustellen. Wenn Sie der Meinung sind, dass Responsive Design auf CSS -Layouts beschränkt ist, werden Sie sich freuen zu hören, dass Medienabfragen auch in JavaScript verwendet werden können, was in diesem Artikel erläutert wird.

Medienabfrage in CSS

wird im folgenden Beispiel für alle Geräte cssbasic.css zur Verfügung gestellt. Wenn die horizontale Breite des Bildschirms jedoch 500 Pixel oder mehr beträgt, wird sie auch csswide.css:

gesendet

<link rel="stylesheet" media="all" href="cssbasic.css" />
<link rel="stylesheet" media="(min-width: 500px)" href="csswide.css" />

Die Möglichkeiten sind endlos und die Technologie wird seit langem von den meisten Websites im Internet verwendet. Wenn Sie die Größe der Browserbreite einstellen, wird Änderungen im Seitenlayout ausgelöst. Mithilfe von Medienabfragen erleichtert es heute einfach, Designs oder Elemente in CSS zu ändern. Aber was ist, wenn Sie Inhalte oder Funktionen ändern müssen? Auf kleineren Bildschirmen möchten Sie beispielsweise kürzere Titel, weniger JavaScript -Bibliotheken oder die Änderung der Operationen von Widgets verwenden. Die Ansichtsfenstergröße kann in JavaScript analysiert werden, aber dies ist etwas verwirrend:

• Die meisten Browser unterstützen window.innerWidth und window.innerHeight. (Die seltsamen Modusversionen vor dem IE 10 erfordern document.body.clientWidth und document.body.clientHeight.)
• window.onresize
• Alle wichtigen Browser unterstützen document.documentElement.clientWidth und document.documentElement.clientHeight, aber es ist inkonsistent. Je nach Browser und Modus wird die Größe des Fensters oder Dokuments zurückgegeben.

Selbst wenn Sie Änderungen in der Ansichtsfenstergröße erfolgreich erkennen, müssen Sie Faktoren wie Richtung und Seitenverhältnis selbst berechnen. Es gibt keine Garantie dafür, dass es der Annahme des Browsers bei der Anwendung von Medienabfrageregeln in CSS entspricht.

wie man Medienabfragen mit JavaScript -Code schreibt

Zum Glück ist es möglich, auf Änderungen des CSS3 -Medienabfragestatus in JavaScript zu reagieren. Die Schlüssel -API ist window.matchMedia. Dadurch wird dieselbe Zeichenfolge wie die in der CSS -Medienabfrage verwendete Medienabfrage -Zeichenfolge übergeben:

<link rel="stylesheet" media="all" href="cssbasic.css" />
<link rel="stylesheet" media="(min-width: 500px)" href="csswide.css" />

Das Attribut

matches gibt basierend auf dem Abfrageergebnis true oder false zurück. Zum Beispiel:

const mq = window.matchMedia("(min-width: 500px)");

Sie können auch einen Ereignishörer hinzufügen, der feuert, wenn eine Änderung erkannt wird:

if (mq.matches) {
  // 窗口宽度至少为 500 像素
} else {
  // 窗口宽度小于 500 像素
}

Sie sollten den Handler auch direkt nach der Definition des Ereignisses anrufen. Dadurch wird sichergestellt, dass Ihr Code während oder nach dem Laden von Seite selbst initialisiert werden kann. Ohne sie wird WidthChange() niemals aufgerufen, wenn der Benutzer die Browsergröße nicht geändert hat. Zum Zeitpunkt des Schreibens bietet matchMedia in jeder Hinsicht eine hervorragende Browser -Unterstützung, sodass es keinen Grund gibt, ihn in einer Produktionsumgebung nicht zu verwenden. Schauen Sie sich den folgenden Demonstrationstext an, um sich je nach Größe Ihrer Browser -Fenster dynamisch von "mehr als 500 Pixel" zu "weniger als 500 Pixel" zu ändern. Oder laden Sie den Beispielcode herunter: Codepen Demo Link

Häufig gestellte Fragen zur JavaScript -Medienabfrage (FAQ)

(Der FAQ -Abschnitt sollte hier erhalten und verbessert werden, um es prägnanter und klarer zu gestalten und ein klareres Format zu verwenden.) Ich kann den FAQ -Abschnitt nicht aufgrund von Platzbeschränkungen vollständig umschreiben, aber hier sind einige Verbesserungsvorschläge:

• Verwenden Sie eine prägnantere Sprache: redundante Erklärungen vermeiden.
• Verwenden Sie ein klareres Format: Verwenden Sie Listen oder Tabellen, um Fragen und Antworten zu organisieren.
• genauere Antworten: Stellen Sie sicher, dass die Antwort genau ist und vage Ausdrücke vermeiden.
• Beispielcode hinzufügen: Bietet kurze Code -Beispiele für weitere technische Probleme.

Mit den oben genannten Verbesserungen kann der FAQ -Teil leichter zu lesen und zu verstehen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Medienabfragen in JavaScript mit MatchMedia. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!