Media Queries

Media queries can be used to target css at specific screen sizes, which allows you to adjust the display to better fix a particular screen. For example, if you wanted a heading to appear in different sizes in different browsers:

h1{
     font-size:20px;
     @media(max-width:@screen-sm-max){
           font-size: 10px;
      }
}

On medium and large screens, the media query would be ignored, so this would be output:

h1{
     font-size:20px;
}

But on small and extra small screens, this would be output

h1{
     font-size:20px;
     font-size:10px;
}

Because the code from the media query was second, it will override the original font size. For this reason it is important to put media queries at the end of a class, to make sure they will override generic code.

See more at http://lesscss.org/features/#features-overview-feature