Jak używać zapytań mediowych za pomocą JavaScript

Użycie zapytań mediowych za pomocą JavaScript

Zapytania mediowe wprowadzono w CSS3 i są jednym z kluczowych elementów projektowania responsywnego Web. Zapytania mediowe służą do określenia szerokości i wysokości okna, aby witryna internetowa prezentowała się dobrze na wszystkich urządzeniach (komputery stacjonarne, laptopy, tablety, telefony itp.).

window.matchMedia() Metoda zwraca obiekt MediaQueryList, który reprezentuje wynik określonego cięcia CSS mediowych.matchMedia() Wartość metody może być CSS @media Jakiekolwiek reguły cech mediowych, takich jak min-height,min-width,orientacja i tak dalej.

Przykład

Jeśli szerokość okna jest mniejsza lub równa 700 pikselom, zmień kolor tła na żółty. Jeśli szerokość jest większa niż 700, zmień ją na różowy:

function myFunction(x) {
  if (x.matches) { // Jeśli zapytanie mediowe pasuje
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Utwórz obiekt MediaQueryList
var x = window.matchMedia("(max-width: 700px)");
// Wywołaj funkcję słuchacza w czasie działania
myFunction(x);
// Dodaj funkcję słuchacza zmian stanu
x.addEventListener("change", function() {
  myFunction(x);
);

Spróbuj sam

Powiązane strony

Tutorial:Media zapytanie CSS

Tutorial:Projektowanie responsywnej witryny internetowej

Podręcznik:Metoda JavaScript window.matchMedia()