media_queries.less

// -- Media Queries
// Extra small screen / phone
@SCREEN_XS_MIN:         480px;
@SCREEN_PHONE:          @SCREEN_XS_MIN;

// Small screen / tablet
@SCREEN_SM_MIN:         768px;
@SCREEN_TABLET:         @SCREEN_SM_MIN;

// Medium screen / desktop
@SCREEN_MD_MIN:         992px;
@SCREEN_DESKTOP:        @SCREEN_MD_MIN;

// Large screen / wide desktop
@SCREEN_LG_MIN:         1200px;
@SCREEN_LG_DESKTOP:     @SCREEN_LG_MIN;

// So media queries don't overlap when required, provide a maximum
@SCREEN_XS_MAX:         (@SCREEN_SM_MIN - 1); // 767px
@SCREEN_SM_MAX:         (@SCREEN_MD_MIN - 1); // 991px
@SCREEN_MD_MAX:         (@SCREEN_LG_MIN - 1); // 1199px

@SCREEN_HIGH_DENSITY:   ~"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)";

.screen-xs(@rules) {
  @media (max-width: @SCREEN_XS_MAX) { @rules(); }
}

.screen-sm(@rules) {
  @media (min-width: @SCREEN_SM_MIN) { @rules(); }
}

.screen-sm-max(@rules) {
  @media (min-width: @SCREEN_SM_MIN) and (max-width: @SCREEN_SM_MAX) { @rules(); }
}

.screen-md(@rules) {
  @media (min-width: @SCREEN_MD_MIN) { @rules(); }
}

.screen-md-max(@rules) {
  @media (min-width: @SCREEN_MD_MIN) and (max-width: @SCREEN_MD_MAX) { @rules(); }
}

.screen-lg(@rules) {
  @media (min-width: @SCREEN_LG_MIN) { @rules(); }
}

.screen-high-density(@rules) {
  @media @SCREEN_HIGH_DENSITY { @rules(); }
}