If you’re like me, a web developer, and programme responsive web layouts using @media queries, you’ll often get lost knowing precisely which set of rules are currently applied to the page.

An easy way to keep track of which set of browser-size-dependent rules are currently applied is to give the body a special background colour whilst you’re developing. Using an easy-to-remember sequence is a great help, too: how about the rainbow?

Here’s an example using LESS syntax. (The colour definitions are standard CSS colour names: you don’t need to additionally define them.)

@media screen and (min-width:@breakpoint1){
 body {
 background-color:red !important;
 }
}
@media screen and (min-width:@breakpoint2){
 body {
 background-color:orange !important;
 }
}
@media screen and (min-width:@breakpoint3){
 body {
 background-color:yellow !important;
 }
}
@media screen and (min-width:@breakpoint4){
 body {
 background-color:green !important;
 }
}
@media screen and (min-width:@breakpoint5){
 body {
 background-color:blue !important;
 }
}
@media screen and (min-width:@breakpoint6){
 body {
 background-color:indigo !important;
 }
}
@media screen and (min-width:@breakpoint7){
 body {
 background-color:violet !important;
 }
}

Leave a Reply

Your email address will not be published. Required fields are marked *

For security, use of Google’s reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

This site uses Akismet to reduce spam. Learn how your comment data is processed.