Bootstrap 4 - come utilizzare media query mixin

Question

Come impostare un punto di interruzione del supporto diciamo da medio a grande: annullo il mixin minimo e il mixin massimo o come faccio.

l'output che sto cercando è qualcosa di simile a questo: @media (larghezza minima: 480px) e (larghezza massima: 767px) utilizzando il breakpoint mixin.

Answer 1

Si esegue una combinazione di due classi. (anche BS4 usi rem ora non px.)

Esempio ... (Da: 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 --> 

Answer 2

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

Dipendenze

I mixins sono dichiarati in mixins/_breakpoints.scss e dipende dalla mappa $ breakpoint della griglia, trovata in _variables.scss.

Esempio

mappa Breakpoint:

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

Mixin:

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

compila in

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

Avviso importante

Media-breakpoint-tra mixin usa e valori più bassi '' 'superiore' del punto di interruzione dichiarato.

• Il valore 'inferiore' del punto di interruzione è il valore dichiarato in $ mappa grid-breakpoint.

• Il valore "superiore" del breakpoint specifico è uguale al valore di punto di interruzione superiore meno 1px.

superiore & inferiori valori di breakpoint esempio (basato od $ grid-breakpoint mappa)

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) 

Altri mixins multimediali

@include media-breakpoint-up(sm) {} crea un punto di interruzione con un min-width di $sm.

@include media-breakpoint-down(md) {} crea un punto di interruzione con una larghezza massima di $md.

Answer 3

qui è anche MixIn media-breakpoint-between($lower, $upper)

Quindi questo dovrebbe funzionare

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