Okno matchMedia()
Przykład 1
Czy ekran/widoczny obszar jest większy niż 700 pikseli:
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definicja i użycie
Metoda matchMedia()zwraca MediaQueryList z wynikami zapytania.
Zobacz też:
Zapytania dotyczące mediów
Zapytania o media w matchMedia()metodzie mogą być dowolnymi funkcjami medialnymi
reguły CSS @media , takimi jak minimalna wysokość, minimalna szerokość, orientacja itp.
Przykłady
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Składnia
window.matchMedia(mediaQuery)
Parametry
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
Wartość zwrotu
| Rodzaj | Opis |
| Obiekt | Obiekt MediaQueryList z wynikami zapytania o media. |
Przykłady wyjaśnione
Pierwszy przykład na tej stronie uruchamia zapytanie o media i porównuje je z bieżącym stanem okna.
Aby uruchomić responsywne zapytanie o media za każdym razem , gdy zmieni się stan okna, dodaj detektor zdarzeń do obiektu MediaQueryList (zobacz „Więcej przykładów” poniżej):
Więcej przykładów
Jeśli widoczny obszar ma mniej niż 500 pikseli szerokości, ustaw kolor tła na żółty, w przeciwnym razie na różowy:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Obsługa przeglądarki
matchMedia() jest obsługiwany we wszystkich nowoczesnych przeglądarkach:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |