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.