Come utilizzare le media query in JavaScript?

Feb 11 2023

Può essere abbastanza comune controllare i ridimensionamenti in javascript (per realizzare alcune funzionalità). È diffuso gestire questa situazione aggiungendo un event listener su “resize”, che non è la soluzione migliore per questo problema, almeno nella maggior parte dei casi.

In questo articolo, dimostrerò un modo efficace per gestire queste situazioni in JavaScript. Confronterò due approcci che realizzano la stessa cosa: il metodo matchMedia e il listener di eventi "resize".

Mostrerò i contro e i pro di ogni metodo, mostrerò come usarlo e fornirò esempi lungo il percorso.

"Il metodo Windowdell'interfaccia matchMedia()restituisce un nuovo MediaQueryListoggetto che può quindi essere utilizzato per determinare se documentcorrisponde alla stringa della media query, nonché per monitorare il documento per rilevare quando corrisponde (o smette di corrispondere) a quella media query."

Innanzitutto, dobbiamo capire che il metodo matchMedia è simile alle media query CSS, che è l'ingrediente principale di qualsiasi responsive design.

@media (min-width: 768px) {
  body {
    background-color: coral;
  }
}

Il metodo matchMedia() restituisce un MediaQueryList con i risultati della query.

il mediaQueryList è un oggetto con 3 proprietà:

corrisponde: (vero/falso) se lo schermo soddisfa o meno le condizioni per la media query
media: (stringa) la media query stessa, fondamentalmente la stringa che hai inserito
onchange: (funzione) metodo listener che accetta una funzione di callback richiamata quando lo stato del supporto cambia.

L'utilizzo è quasi identico alle media query CSS. Passiamo la stringa di media query a matchMedia() e quindi controlliamo la proprietà "matches".

window.matchMedia("min-width: 768px").onchange = (e) => {
  if (e.matches) {
    // the screen was below 768 and now it's above or equal
    document.body.style.backgroundColor = "coral";
  }
}

Il modo tipico e più comune in cui molti sviluppatori gestiscono il ridimensionamento dello schermo in JavaScript è associando un listener di eventi di ridimensionamento che controlla la larghezza del documento.

window.addEventListener("resize", function() {
  if (document.body.clientWidth >= 768) {
    document.body.style.backgroundColor = "coral";
  }
});

Puoi anche vedere la differenza su console.log, l'evento di ridimensionamento si attiverà ogni volta che il browser viene ridimensionato mentre matchMedia verrà eseguito solo una volta dopo che corrisponde alla media query.

“Anche se guardiamo oltre i problemi di prestazioni, il ridimensionamento è restrittivo nel senso che non ci consente di scrivere query multimediali avanzate per cose come la stampa e l'orientamento. Quindi, mentre imita il comportamento delle "media query" consentendoci di abbinare le larghezze del viewport, non è in grado di corrispondere a gran parte di qualsiasi altra cosa e sappiamo che le vere media query sono in grado di fare molto di più".

In conclusione, abbiamo parlato delle esigenze di matchMedia ed esplorato come ci consente di definire le condizioni dei media ed esaminare l'oggetto mediaQueryList che ci consente di eseguire il nostro codice una volta quando corrisponde alla condizione e in modo persistente impostando il metodo "onchange" della mediaQueryList.

Abbiamo confrontato il metodo matchMedia con l'associazione di un listener di eventi di ridimensionamento, che ci ha permesso di esaminare il modo più adatto per noi di rispondere ai cambiamenti nelle dimensioni dello schermo.

Ho fornito esempi lungo il percorso in cui tutti fanno la stessa cosa (impostando backgroundColor del corpo su corallo) per mostrare come scriverlo su ogni approccio.

Se hai domande su questo post o suggerimenti, correzioni o note, non esitare a commentare, inviare un'e-mail o scrivermi in DM. Grazie per aver letto!