Come fare per - Query sui media con JavaScript
Esempio
Se la finestra ha una larghezza inferiore o uguale a 700 pixel, cambia il colore di sfondo in giallo. Se è maggiore di 700, cambialo in rosa
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
Utilizzo di media query con JavaScript
Le media query sono state introdotte in CSS3 ed è uno degli ingredienti chiave per il responsive web design. Le media query vengono utilizzate per determinare la larghezza e l'altezza di un viewport in modo che le pagine Web abbiano un bell'aspetto su tutti i dispositivi (desktop, laptop, tablet, telefoni, ecc.).
Il metodo window.matchMedia() restituisce un oggetto MediaQueryList che rappresenta i risultati della stringa di query multimediale CSS specificata. Il valore del metodo matchMedia() può essere una qualsiasi delle funzionalità multimediali della regola CSS @media , come min-height, min-width, orientamento, ecc.
Scopri di più sulle media query nel nostro tutorial CSS Media Query
Scopri di più sul design reattivo nel nostro Tutorial di design Web reattivo
Scopri di più sul metodo window.matchMedia() nel nostro JavaScript Reference.