Read more

How to read the current breakpoint tier(s) in JavaScript

Dominik Schöler
January 10, 2023Software engineer at makandra GmbH

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;
Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show snapshot

Then use this JavaScript:

// globally

// or locally

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

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

Hat tip to Arne.

Posted by Dominik Schöler to makandra dev (2023-01-10 16:19)