getCurrentMediaQuery

description

Returns the current media query in use by reading a CSS :root variable. Useful for running JS functions at certain breakpoints without holding breakpoint size information in CSS and JS.

requires

• specific CSS

:root {
  --breakpoint: "xs";
}

@media (min-width: 544px) {
  :root {
    --breakpoint: "sm";
  }
}

@media (min-width: 650px) {
  :root {
    --breakpoint: "md";
  }
}

@media (min-width: 990px) {
  :root {
    --breakpoint: "lg";
  }
}

@media (min-width: 1300px) {
  :root {
    --breakpoint: "xl";
  }
}

@media (min-width: 1520px) {
  :root {
    --breakpoint: "xxl";
  }
}

parameters

• none

returns

• media query string as a string

example usage:

var mq = getCurrentMediaQuery(); // returns 'lg' (if viewport at lg size)

notes

If you are using A17 Tailwind Plugins, A17 SCSS Utilities (or BP7) it is likely that these CSS :root variables are already being output for you.

If you are using isBreakpoint within a behavior JS file with A17 Behaviors - then you can use this.isBreakpoint('medium') without importing/including this helper. Assuming you follow the A17 Behaviors Setup, especially passing in breakpoint info then isBreakpoint within behaviors will know the application breakpoints without being specified.