Cacher is the code snippet organizer for pro developers

// 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
//
// Example Usage: 	  @media @sm-and-above {STYLES}
//                    @media @xs-only, @sm-only {STYLES}

//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);