Common media queries with LESS

CSS media queries

@media only screen and (max-width: 767px) {
  
}
@media only screen and (min-width: 768px) {
  
}
@media only screen and (min-width: 992px) {
  
}
@media only screen and (min-width: 1200px) {
  
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  
}

LESS media query vars

// Common media queries breakpoints (incl Bootstrap)
// -------------------------------------------------

// Extra small screen / phone
@screen-xs-min:   480px;

// Small screen / tablet
@screen-sm-min:   768px;

// Medium screen / desktop
@screen-md-min:   992px;

// Large screen / wide desktop
@screen-lg-min:   1200px;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:   (@screen-sm-min - 1);
@screen-sm-max:   (@screen-md-min - 1);
@screen-md-max:   (@screen-lg-min - 1);

// Common pre-built queries
@phone:           ~"only screen and (max-width: @{screen-xs-max})";
@tablet:          ~"only screen and (min-width: @{screen-sm-min})";
@medium:          ~"only screen and (min-width: @{screen-md-min})";
@large:           ~"only screen and (min-width: @{screen-lg-min})";

// For specifying only a particular range of screen sizes
@tablet-only:     ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@medium-only:     ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";

@media @phone {}

@media @tablet {}

@media @medium {}

@media @large {}

@media @tablet-only {}

@media @medium-only {}