Bootstrap 4 - how to use media query mixin

问题:

How do I set a media breakpoint let's say from medium to large - do I nest the min mixin and max mixin or how do I do that.

the output I'm after is something like this: @media (min-width: 480px) and (max-width: 767px) using the breakpoint mixin.

回答1:

Use media-breakpoint-between($lower, $upper)

Dependencies

The mixins are declared in mixins/_breakpoints.scss, and depend on the $grid-breakpoints map, found in _variables.scss.

Example

Breakpoint map:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) 

Mixin:

@include media-breakpoint-between(sm, md) {
    // your code
}

Compiles to

@media (min-width: 576px) and (max-width: 991px) {}

Important notice

Media-breakpoint-between mixin uses 'lower' and 'upper' values of declared breakpoint.

• The 'lower' value of breakpoint is the declared value in $grid-breakpoint map.

• The 'upper' value of specific breakpoint is equal to the value of higher breakpoint minus 1px.

Upper & lower breakpoint values example (based od $grid-breakpoint map)

Lower value of md is equal to 576
Upper value of md is equal to 991 ( value of next breakpoint (lg) minus 1px (992px-1px)

Other media mixins

@include media-breakpoint-up(sm) {} creates a breakpoint with a min-width of $sm.

@include media-breakpoint-down(md) {} creates a breakpoint with a max-width of $md.

回答2:

Here is also mixin media-breakpoint-between($lower, $upper)

So this should work

@include media-breakpoint-between(sm, md){
  // this applies only between the sm and ms breakpoints 
}

回答3:

You do a combo of two classes. (Also BS4 uses rems now not px.)

Example... (From: http://codepen.io/j_holtslander/pen/jbEGWb)

<!-- Jay's Viewport Helper -->
<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;">
  <span class="hidden-sm-up">SIZE XS</span>
  <span class="hidden-xs-down hidden-md-up">SIZE SM</span>
  <span class="hidden-sm-down hidden-lg-up">SIZE MD</span>
  <span class="hidden-md-down hidden-xl-up">SIZE LG</span>
  <span class="hidden-lg-down">SIZE XL</span>
</div>
<!-- /Jay's Viewport Helper -->