js media query

PHOTO EMBED

Tue Nov 01 2022 04:42:54 GMT+0000 (Coordinated Universal Time)

Saved by @davidmchale #media #query #mediaquery

function applyMediaQuery(selector, maxWidth) {
  const elements = document.querySelectorAll(selector);

  function updateClasses(mediaQuery) {
    elements.forEach((item) => {
      if (mediaQuery.matches) {
        item.classList.add('mobile');
      } else {
        item.classList.remove('mobile');
      }
    });
  }

  const mediaQuery = window.matchMedia(`(max-width: ${maxWidth}px)`);

  // Initial check
  updateClasses(mediaQuery);

  // Listen for changes
  mediaQuery.addEventListener('change', updateClasses);

  return elements;
}

// Usage
applyMediaQuery(".hero", 600);
content_copyCOPY