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 comment

Your e-mail address will not be published. Required fields are marked *

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

This website uses cookies in order to provide you with the best possible experience when using the website. Privacy policy.