Keeping Track of Media Queries

When building a responsive design, it can be helpful to have a reminder of which media query is currently in effect. It’s easy to use CSS generated content to display the current query.

The above snippet is in SASS, and is also available in CSS.


Here is a demo

Mobile First

It should be noted that the above queries work with a mobile-first approach. It assumes that your base styles will be written for mobile devices, and that you’ll progressively enhance from there, remembering that layout is an enhancement.