mcgraths
1/9/2015 - 1:34 AM

Awesome LESS Media Query Breakpoints (Bootstrap 3 Support)

Awesome LESS Media Query Breakpoints (Bootstrap 3 Support)

// LESS Media Query Breakpoints
//
// Extra small screen / phone: 0 to @screen-xs-max
// Small screen / tablet: @screen-sm-min to @screen-sm-max
// Medium screen / desktop: @screen-md-min to @screen-md-max
// Large screen / wide desktop: @screen-lg-min and above

//Variables (not needed if including Bootstrap 3 variables)

@screen-xs-min:                  480px;
@screen-sm-min:                  768px;
@screen-md-min:                  992px;
@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);

//Retina

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";



// Extra small devices and up (every device)
// No media query since this is the default in Bootstrap

//Extra small devices only
@xs-portrait-only: %(~"only screen and (max-width: %d)", @screen-xs-min);
@xs-only: %(~"only screen and (max-width: %d)", @screen-xs-max);

// Small devices (tablets, 768px and up)
@sm-and-above: %(~"only screen and (min-width: %d)", @screen-sm-min);
@sm-only: %(~"only screen and (min-width: %d) and (max-width: %d)", @screen-sm-min, @screen-sm-max);

// Medium devices (desktops, 992px and up)
@md-and-above: %(~"only screen and (min-width: %d)", @screen-md-min);
@md-only: %(~"only screen and (min-width: %d) and (max-width: %d)", @screen-md-min, @screen-md-max);

// Large devices (large desktops, 1200px and up)
@lg-and-above: %(~"only screen and (min-width: %d)", @screen-lg-min);
@import "variables";

@media @xs-only, @sm-only {
  body {
    background-color: red;
  }  
}

body {
  background-color: red;
  
  @media @md-and-above {
    background-color: blue;
  }
}