Come usare JavaScript per le query di media

Usare JavaScript per le query di media

Le query di media sono state introdotte in CSS3 e sono uno degli elementi chiave della progettazione web responsive. Le query di media vengono utilizzate per determinare la larghezza e l'altezza della finestra di visualizzazione in modo che il sito web si visualizzi bene su tutti i dispositivi (computer, laptop, tablet, telefoni cellulari, ecc.).

window.matchMedia() Il metodo returna un oggetto MediaQueryList che rappresenta il risultato della stringa di query di media CSS specificata.matchMedia() Il valore del metodo può essere CSS @media qualsiasi caratteristica di media specifica, ad esempio min-height,min-width,orientation ecc.

Esempio

Se la larghezza della finestra di visualizzazione è inferiore o uguale a 700 pixel, cambia il colore di sfondo in giallo. Se la larghezza è superiore a 700, cambiala in rosa:

function myFunction(x) {
  if (x.matches) { // Se la query di media corrisponde
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Crea l'oggetto MediaQueryList
var x = window.matchMedia("(max-width: 700px)")
// Chiama la funzione di ascolto degli eventi durante l'esecuzione
myFunction(x);
// Aggiungi la funzione di ascolto degli eventi quando lo stato cambia
x.addEventListener("change", function() {
  myFunction(x);
});

Prova personalmente

Pagine correlate

Tutorial:Query media CSS

Tutorial:Progettazione di pagine web responsive

Manuale di riferimento:Metodo window.matchMedia() di JavaScript