adjust the appearance and behavior depending on the width of the screen (CSS media queries in JS)

mediaQueries.js

function handleProperDevice(x) {
    if (x.matches) {
        // If media query matches
        
    } else {
        // If media query doesn't match
    }
}

var x = window.matchMedia("(max-width: 768px)");
handleProperDevice(x); // Call listener function at run time
x.addListener(handleProperDevice); // Attach listener function on state changes