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;
  }
}

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.

Dominik Schöler

makandra.de

Say thanks

Last edit

Over 1 year ago

Arne Hartherz

License

Source code in this card is licensed under the MIT License.

Async control flow in JavaScript: Promises, Microtasks, async/await

Slides for Henning's talk on Sep 21st 2017.

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

print('script start')
html = get('/foo')
print(html)
print('s...

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

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

Related cards:

Introduction

Summary

Understanding sync vs. async control flow

Talking to synchronous (or "blocking") API

Intro