JavaScript media query.md

JavaScript media query

  try {
    const mediaQueryMax1023 = window.matchMedia('(max-width: 1023px)')
    const mediaQueryMin1024 = window.matchMedia('(min-width: 1024px)')
  
    mediaQueryMax1023.addListener(mobile);
    function mobile(media) {
      if (media.matches) {
        klevuHelpers.addFilterButton() // load if <= 1023
        console.log(`load if <= 1023`);
      }
    };
    mobile(mediaQueryMax1023);

    mediaQueryMin1024.addListener(desktop);
    function desktop(media) {
      if (media.matches) {
        klevuHelpers.createFilterWrapperBlock() // load if > 1023
        klevuHelpers.moveFiltersToWrapper() // load if > 1023
        console.log(`load if >= 1024`);
      }
    };
    desktop(mediaQueryMin1024);
  } catch (error) {
    console.log(error);
  }

https://css-tricks.com/working-with-javascript-media-queries/