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)