Utilizzare le media queries con Javascript

Nel mondo responsive le media-queries sono diventate fondamentali!

Attraverso queste regole, possiamo impostare diversi stili CSS a seconda delle dimensioni dello schermo.

Ho scoperto che è anche possibile usarle anche attraverso Javascript e l'oggetto window.matchMedia!

Vediamo un primo esempio:

            window.onload = function () {
                const mq = window.matchMedia("(min-width: 1024px)");
                if (mq.matches) {
                    console.log('OK');
                } else {
                    console.log('KO');
                }
            }

Qua controlliamo che la larghezza dello schermo sia almeno di 1024px.

Possiamo anche aggiungere dei listener, ad esempio al cambiamento della dimensione del browser:

            window.onload = function () {
                const mq = window.matchMedia("(min-width: 1024px)");
                if (mq.matches) {
                    console.log('OK');
                } else {
                    console.log('KO');
                }

                mq.addListener(function (mq) {
                    if (mq.matches) {
                        console.log('OK');
                    } else {
                        console.log('KO');
                    }
                });
            }

Tendenzialmente, personalmente, continuerei ad usare i CSS per le media-queries.

Ma poterle controllare anche attraverso Javscript può essere utile in diversi casi.

Enjoy!