To read the current breakpoint tier in JavaScript, employ this CSS:

:root {
  --current-breakpoint-tier: xs;
  
  @media (min-width: $screen-sm-min) {
    --current-breakpoint-tier: sm;
  }
  @media (min-width: $screen-md-min) {
    --current-breakpoint-tier: md;
  }
  @media (min-width: $screen-lg-min) {
    --current-breakpoint-tier: lg;
  }
  @media (min-width: $screen-xl-min) {
    --current-breakpoint-tier: xl;
  }
  @media (min-width: $screen-xxl-min) {
    --current-breakpoint-tier: xxl;
  }
}

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

• Introduce design conventions for controllers and user-facing models
• Create a system for growth
• Build applications to last

Read more Show archive.org snapshot

Then use this JavaScript:

// globally
getComputedStyle(document.documentElement).getPropertyValue('--current-breakpoint-tier')

// or locally
getComputedStyle(someElement).getPropertyValue('--current-breakpoint-tier')

If you're using Bootstrap and Sass, you can even do this:

\:root
  @each $name, $min-width in $grid-breakpoints
    @media (min-width: $min-width)
      --current-breakpoint-tier: #{$name}

Hat tip to Arne.