October 11, 2023

Detect Media Query Changes with JavaScript

In today's responsive web design, detecting changes in media queries is crucial. JavaScript provides a way to do this.

// Create a media query list
var mediaQueryList = window.matchMedia('(max-width: 600px)');

// Define a function that will be called whenever the media query status changes
function mediaQueryListener(e) {
  if (e.matches) {
    // The media query now matches
  } else {
    // The media query no longer matches
  }
}

// Add the listener function to the media query list
mediaQueryList.addListener(mediaQueryListener);

This tip shows how to use JavaScript to listen for changes in a media query. This is useful for dynamically adjusting the layout or behavior of a website based on the user's viewport size.