Whenever I’m developing a responsive site or app, I sometimes get confused as to which breakpoint range I am currently viewing, to then effect changes to a particular file. So I thought that whilst working up through the minimum size breakpoints, following mobile first principles, it would be nice to have a notification on the screen that told me what the current / last breakpoint was that had been met.
The SASS code below simply accepts a map of project breakpoints and handles the generation of the media queries required for each notification, simply drop into your project and edit accordingly. Of course this is something that you would only want during development and therefore only include in your dev build. However, depending on your project setup, it may be quite easy to add a top level css class to the body that identifies what the current environment is, for example my debugger will only display if the class env-development is applied.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | /** * MEDIA QUERY DEBUG */ body.env-development { // define the breakpoints map $_breakpoints: ( xs: (bp: $screen-xs, colour: black), sm: (bp: $screen-sm, colour: red), md: (bp: $screen-md, colour: green), lg: (bp: $screen-lg, colour: blue) ); // Create default base breakpoint notification display &:before { display: block; position: fixed; right: 0; bottom: 0; z-index: 10000; background: #fff; border: 1px solid #000; font-size: 11px; color: #000; padding: 0.2em 0.4em; content: "We're below #{map-get(map-get($_breakpoints, 'xs'), 'bp')}"; } // Loop through the breakpoints map and create the media query for each notification @each $_size-key, $_size-map in $_breakpoints { // Lookup and set the breakpoint width and notification colour for the current size in the loop $_bp: map-get(map-get($_breakpoints, $_size-key), 'bp'); $_colour: map-get(map-get($_breakpoints, $_size-key), 'colour'); @media (min-width: $_bp) { &:before { background: $_colour; color: #fff; content: "Over #{$_bp} - (#{$_size-key})"; } } } } |
The breakpoint variables used above are from the Bootstrap framework, of course you can customise this further to fit your project by adding additional breakpoints if you required.
The result is an unobtrusive breakpoint notifier in the bottom corner of the screen, that will change responsively according to the current viewport width:
