HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>matchMedia() — change</title>
</head>
<body>
  <p>Resize this panel across 600px to see updates.</p>
  <pre id="out"></pre>
  <script>
    var mediaQuery = window.matchMedia("(min-width: 600px)");
    function handleChange() {
      document.getElementById("out").textContent = mediaQuery.matches
        ? "Now at least 600px wide."
        : "Now less than 600px wide.";
    }
    handleChange();
    mediaQuery.addEventListener("change", handleChange);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

JavaScript matchMedia() — change listener (Try It)