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)