scss Bootstrap Sass媒体查询变量

Posted 2021-05-17

//== Media queries breakpoints

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

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

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

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

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