Metoda Window matchMedia()

Definicja i użycie

matchMedia() Metoda zwraca MediaQueryList z wynikami zapytania.

Zobacz również:

Obiekt MediaQueryList

Media query

Metoda matchMedia() może być używana do mediów, które są dowolnymi atrybutami media w regułach @media CSS, na przykład min-height, min-width, orientation itp.

Przykład

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

Przykład

Przykład 1

Czy ekran/okno jest szersze niż 700 pikseli?

if (window.matchMedia("(max-width: 700px)").matches) {
  // Szerokość ekranu mniejsza lub równa 700 pikseli
}
  // Szerokość ekranu większa niż 700 pikseli
}

spróbuj sam

Wyjaśnienie przykładu

Ten przykład uruchamia media query i porównuje ją z bieżącym stanem okna.

Aby uruchomić odpowiednią media query w momencie zmiany stanu okna, dodaj słuchacz wydarzeń do obiektu MediaQueryList (zobacz poniżej "Więcej przykładów"):

Przykład 2

Jeśli szerokość ekranu jest mniejsza lub równa 500 pikselom, ustaw kolor tła na żółty, w przeciwnym razie na różowy:

// Utwórz funkcję match
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// Utwórz obiekt MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// Wywołaj funkcję match w czasie działania:
myFunction(mmObj);
// Dodaj funkcję match jako słuchacz zmian stanu:
mmObj.addListener(myFunction);

spróbuj sam

gramatyka

window.matchMedia("mediaQuery)

parametry

parametry Opis
mediaQuery Wymagane. Wzorzec media query.

Zwraca wartość

Typ Opis
Obiekt Obiekt MediaQueryList z wynikami zapytania media query.

Wspierane przeglądarki

Wszystkie przeglądarki wspierają matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie 11 Wsparcie Wsparcie Wsparcie Wsparcie