如果 window 大小发生变化，如何更新 window.matchMedia？

Question

This function only works when the page gets reloaded:

 if (window.matchMedia("(max-width: 700px)").matches) { $("html").css("background-color", "yellow"); } else { $("html").css("background-color", "red"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But how can I additionally update it if the window size changes?

This article didn't help me so far. It's hard for me to find the best solution.

Answer 1

You could set up the event handler using the addEventListener() method:

Window.addEventListener('resize', reportWindowSize);

function reportWindowSize() {
  var height = window.innerHeight;
  var width = window.innerWidth;
}

or

window.onresize = reportWindowSize;

Answer 2

Using jQuery just put it in a resize event handler and trigger the event also when page loads

$(window).resize(function(){    
    if (window.matchMedia("(max-width: 700px)").matches) {
      $("html").css("background-color", "yellow");
    } else {
      $("html").css("background-color", "red");
    }
}).resize()// trigger on page load

Answer 3

 function myFunction() { if (window.matchMedia("(max-width: 700px)").matches) { $("html").css("background-color", "yellow"); } else { $("html").css("background-color", "red"); } }; // Resize event window.addEventListener("resize", myFunction); // First load window.addEventListener("load", myFunction);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>