Arbeiten mit JavaScript Media -Abfragen

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!