Media Query mit Javascript

CSS

         .box{
        width: 100px;
        height: 100px;
        background-color: yellow;
        }

        @media screen and (max-width: 700px){
            .box{
                background-color: hotpink;
            }
        }   
    

HTML

<div class="box"> class="box"</div>

Javascript

     mqList = window.matchMedia('(max-width: 700px)');
     
     console.log(mqList);
     
     mqList.addEventListener("change", func);
     
     function func(evt){
         console.log(evt.matches);
     }

Erklärung

window.matchMedia gibt ein MediaQuery List Objekt zurück. Dessen Eigenschaften und Werte werden in der Konsole angezeigt.
console.log(mqList);

MediaQueryList {media: '(max-width: 700px)', matches: false, onchange: null}

Dem Media Query List Objekt kann man einen Event-Listener anhängen, der feuert wenn sich der Breakpoint ändert. Man sieht wenn man das Browserfenster zwischen einer Breite von 700 Pixeln hin und her schiebt, dass die matches Eigenschaft true und false zurück gibt. Hier könnte man mit einer if() Struktur auf diesen Breakpoint reagieren.

Developer öffnen mit F12

Javascript Tipps