Responsive Breakpoint Label

For quick reference of which media query is active.

We can use the content property of a pseudo element on the body to identify which media query we’re looking at. Since this is maintained entirely in CSS, it can be turned on/off with a simple display: none, or removed entirely without touching content.

This can also be done right in Chrome’s Dev Tools, but when designing in the browser early on, something like this can help for a quick reference.

Inspired by Eric Rasch

(resize browser to see the label change)

See the Pen Responsive Breakpoint Label by Chase (@chasebank) on CodePen.