Help navigating breakpoints when coding responsive layouts

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;
 }
}