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

css setup

Set up :root variables changing a --breakpoint value at each of your breakpoints, with the name of your breakpoint. If using A17 Tailwind Plugins or A17 SCSS Utilities then this set up is likely done for you.

: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 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.