Bootstrap 4 - Wie benutze ich media query mixin

Question

Wie stelle ich einen Media Breakpoint ein, sagen wir von mittel bis groß - schiebe ich die Min Mixin und Max Mixin oder wie mache ich das?

Die Ausgabe, nach der ich suche, ist etwa so: @media (min-width: 480px) und (max-width: 767px) mit dem Breakpoint Mixin.

Answer 1

Sie tun eine Kombination aus zwei Klassen. (auch REMS BS4 verwendet jetzt nicht px.)

Beispiel ... (Aus: 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

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

Abhängigkeiten

Die Mixins deklariert sind in mixins/_breakpoints.scss, und hängen von der Karte $ grid-breakpoints ab, die in _variables.scss gefunden wird.

Beispiel

Breakpoint- Karte:

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

Mixin:

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

Kompiliert zu

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

Wichtiger Hinweis

Medien-Breakpoint-zwischen mixin verwendet 'untere' und 'obere' Werte des angegebenen Haltepunkts.

• Der 'unterer' Wert des Haltepunkts ist der angegebene Wert in $ grid-Breakpoint Karte.

• Der 'obere' Wert des spezifischen Haltepunkts ist gleich dem Wert von höherem Haltepunkt minus 1px.

Ober & unteren Unterbrechungspunkt-Werte beispielsweise (basierend od $ rasterUnterbrechungs Karte)

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) 

Andere Medien Mixins

@include media-breakpoint-up(sm) {} schafft einen Haltepunkt mit einer min-Breite von $sm.

@include media-breakpoint-down(md) {} erstellt einen Haltepunkt mit einer maximalen Breite von $md.Hier

Answer 3

ist mixin auch media-breakpoint-between($lower, $upper)

So sollte diese Arbeit

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