x
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><p>If the viewport is less than, or equal to, 700 pixels wide, the background color will be yellow. If it is greater than 700, it will change to pink.</p><p><strong>Resize the browser window to see the effect.</strong></p><script>function myFunction(x) { if (x.matches) { // If media query matches document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; }}// Create a MediaQueryList objectvar x = window.matchMedia("(max-width: 700px)")// Call listener function at run timemyFunction(x);// Attach listener function on state changesx.addEventListener("change", function() { myFunction(x);});</script></body></html>