easily include this file into your project then call the breakpoints while writing your styles.css

media-queries.less

/* === Responsive Breakpoint Values === */
// XL  Breakpoint: 1025px - 1200px; (desktop and up)
// L   Breakpoint: 769px  - 1024px; (tablet landscape)
// M   Breakpoint: 706px  - 768px;  (tablet portrait)
// S   Breakpoint: 481px  - 705px;  (mobile landscape)
// XS  Breakpoint: 320px  - 480px;  (mobile portrait)

/* === LESS variables === */
@mq-desktop	      : 1025px;
@mq-tablet-landscape    : 769px;
@mq-tablet-portrait     : 706px;
@mq-mobile-landscape    : 481px;
@mq-mobile-portrait     : 320px;


/* mobile portrait and landscape */
.mobile-only(@content) {
         @media (max-width : @mq-mobile-landscape) {
         @content();
         }
       }

/* everything up to mobile mobile portrait only */
.mobile-portrait-only(@content) {
         @media (max-width : @mq-mobile-portrait) {
         @content();
         }
       }

/* everything up to and including the mobile portrait */
.mobile-portrait-and-below(@content) {
         @media (max-width : @mq-mobile-portrait) {
         @content();
         }
       }

/* the mobile portrait and everything above */
.mobile-portrait-and-up(@content) {
         @media (min-width : @mq-mobile-portrait) {
         @content();
         }
       }

/* anything larger than a mobile portrait up to mobile landscape */
.mobile-landscape-only(@content) {
         @media only screen and (min-width : @mq-mobile-portrait + .001) and (max-width : @mq-mobile-landscape) {
         @content();
         }
       }

/* anything including mobile landscape and everything below that */
.mobile-landscape-and-below(@content) {
         @media only screen and (max-width : @mq-mobile-landscape) {
         @content();
         }
       }

/* Everything above and including the mobile landscape width */
.mobile-landscape-and-up(@content) {
         @media only screen and (min-width : @mq-mobile-portrait + .001) {
         @content();
         }
       }

.tablet-only(@content) {
         @media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-landscape) {
         @content();
         }
       }

.tablet-portrait-only(@content) {
         @media only screen and (min-width : @mq-mobile-landscape + .001) and (max-width : @mq-tablet-portrait) {
         @content();
         }
       }

// Everything below and including the portrait width of the tablet
.tablet-portrait-and-below(@content) {
         @media only screen and (max-width : @mq-tablet-portrait) {
         @content();
         }
       }

// Everything above and including the portrait width of the tablet
.tablet-portrait-and-up(@content) {
         // @media only screen and (min-width : $mq-mobile-landscape + 1) {
         @media only screen and (min-width : @mq-tablet-portrait + .001) {
         @content();
         }
       }

/* Larger than portrait but less than or equal to the landscape width */
.tablet-landscape-only(@content) {
         @media only screen and (min-width : @mq-tablet-portrait + .001) and (max-width : @mq-tablet-landscape) {
         @content();
         }
       }

.tablet-landscape-and-below(@content) {
         @media only screen and (max-width : @mq-tablet-landscape) {
         @content();
         }
       }

.tablet-landscape-and-up(@content) {
         @media only screen and (min-width : @mq-tablet-portrait + .001) {
         @content();
         }
       }

.desktop-and-up(@content) {
         @media only screen and (min-width : @mq-tablet-landscape + .001) {
         @content();
         }
       }

.desktop-and-below(@content) {
         @media only screen and (max-width : @mq-desktop) {
         @content();
         }
       }

.desktop-only(@content) {
         @media only screen and (min-width : @mq-tablet-landscape + .001) and (max-width : @mq-desktop) {
         @content();
         }
       }

.retina(@content) {
         @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
         @content();
         }
       }