Jak to zrobić — Zapytania o media za pomocą JavaScript
Przykład
Jeśli widoczny obszar ma szerokość mniejszą lub równą 700 pikseli, zmień kolor tła na żółty. Jeśli jest większy niż 700, zmień go na różowy
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Korzystanie z zapytań o media z JavaScript
Zapytania o media zostały wprowadzone w CSS3 i są jednym z kluczowych składników responsywnego projektowania stron internetowych. Zapytania o media służą do określania szerokości i wysokości widocznego obszaru, aby strony internetowe wyglądały dobrze na wszystkich urządzeniach (komputerach stacjonarnych, laptopach, tabletach, telefonach itp.).
Metoda window.matchMedia() zwraca obiekt MediaQueryList reprezentujący wyniki określonego ciągu zapytania o media CSS. Wartością metody matchMedia() może być dowolna z właściwości multimedialnych reguły CSS @media , takich jak minimalna wysokość, minimalna szerokość, orientacja itp.
Dowiedz się więcej o zapytaniach o media w naszym samouczku CSS Media Query
Dowiedz się więcej o responsywnym projektowaniu z naszego samouczka Responsive Web Design
Dowiedz się więcej o metodzie window.matchMedia() w naszej dokumentacji JavaScript.