JavaScript -Medienabfragen: Beyond Window Gratize

Was f?llt mir ein, wenn Sie an Medienfragen denken? Wahrscheinlich regiert CSS wie diese:

 K?rper {
  Hintergrundfarbe: Plum;
}

@media (min-Width: 768px) {
  K?rper {
    Hintergrundfarbe: Tomate;
  }
}

CSS -Medienabfragen sind von grundlegender Bedeutung für reaktionsschnelles Design, angewendet Stile basierend auf der Gr??e der Ansichtsfenster, der Ger?tetyp, den Einstellungen (Farbschema, Bewegung) und mehr. JavaScript bietet jedoch auch Medienabfragefunktionen, die h?ufig für das Erstellen von Responsive -Plugins oder das dynamische Anpassen von Elementen basierend auf den Bildschirmbedingungen wertvoll sind.

Im Gegensatz zu CSS unterscheidet sich die Medienabfrage von JavaScript. Das Kernkonzept bleibt gleich: übereinstimmung mit Bedingungen und Anwendung von Aktionen.

Verwenden von matchMedia()

Die matchMedia() -Methode bestimmt, ob eine Medienabfrage mit dem aktuellen Dokumentstatus übereinstimmt. Obwohl der Browser -Support im CSS -Objektmodell -Ansichtsmodul arbeitet, ist der Browser -Support hervorragend.

Die Nutzung spiegelt CSS wider: übergeben Sie eine Medienabfrage -Zeichenfolge an matchMedia() und überprüfen Sie die .matches .

 // die Abfrage definieren
const MediaQuery = window.matchmedia ('(min-width: 768px)');

matchMedia() gibt ein MediaQueryList -Objekt zurück. Die Eigenschaft .matches (schreibgeschützter Boolean) gibt an, ob das Dokument mit der Abfrage übereinstimmt.

 // Erstellen Sie eine Medienbedingung für Ansichtsfenster mindestens 768px breit
const MediaQuery = window.matchmedia ('(min-width: 768px)');
// überprüfen Sie, ob die Medienabfragen übereinstimmen
if (Mediaquery.Matches) {
  // eine Aktion ausl?sen
  Alert ('Medienabfrage übereinstimmt!');
}

Dies behandelt einzelne Schecks. Für die kontinuierliche überwachung brauchen wir Event -H?rer.

Auf ?nderungen h?ren

MediaQueryList bietet addListener() (und removeListener() ) zur Registrierung einer Rückruffunktion ( .onchange -Ereignis) ausgel?st, wenn sich der Status der Medienabfrage ?ndert. Dies erm?glicht reaktionsschnelle Aktionen auf aktualisierte Bedingungen.

 // Erstellen Sie eine Bedingung für Ansichtsfenster mindestens 768px breit
const MediaQuery = window.matchmedia ('(min-width: 768px)');

Funktion Handletabletchange (e) {
  // überprüfen Sie, ob die Medienabfragen übereinstimmen
  if (e.matches) {
    // eine Aktion durchführen
    console.log ('Medienabfrage übereinstimmt!');
  } anders {
    console.log ('Medienabfrage unerreicht!');
  }
}

// Event -H?rer registrieren
MediaQuery.AddListener (Handletabletchange);

// Erstprüfung
Handlebende (Mediaquery);

addListener() feuert nicht sofort aus; Sie müssen den Handler manuell mit dem Objekt MediaQueryList als Argument anrufen.

Der "alte" Ansatz

Zum Vergleich verwendet die ?ltere Methode einen Event -Listener resize mit window.innerWidth oder window.innerHeight . Dies ist weniger effizient und weniger vielseitig.

 Funktion CheckMediaquery () {
  // überprüfen Sie, ob die innere Breite des Fensters gr??er als 768px ist
  if (window.innnerwidth> 768) {
    // eine Aktion durchführen
    console.log ('Medienabfrage übereinstimmt!');
  }
}

// Fügen Sie einen H?rer für die Ereignisse der Fensterresize -Gr??en?nderung hinzu
window.adDeVentListener ('Gr??e', CheckMediaQuery);

Dies ist leistungsintensiv und beschr?nkt auf die überprüfung der Ansichtsfenster, im Gegensatz zum leistungsst?rkeren matchMedia() -Ansatz.

Abschluss

matchMedia() und MediaQueryList bieten eine robuste Abfrageberechnung mit JavaScript-Medien, die sowohl einmalige als auch kontinuierliche überprüfungen erm?glichen und auf ?nderungen der verschiedenen Bedingungen reagieren, die sich nur einer einfachen Ansichtsfenstergr??e stellen. Der ?ltere resize Ereignis-H?rer bleibt funktionsf?hig, ist jedoch weniger effizient und weniger featurereich. Die Flexibilit?t von matchMedia() macht es zur bevorzugten Methode für die moderne reaktionsschnelle JavaScript -Entwicklung.

Hier ist ein Beispiel, das eine F?higkeit demonstriert, die mit der alten Methode nicht verfügbar ist: die Erkennung der Landschaftsorientierung. Dies wird h?ufig in der HTML5 -Spielentwicklung verwendet.

Das obige ist der detaillierte Inhalt vonArbeiten mit JavaScript Media -Abfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!