web-dev-qa-db-fra.com

Bootstrap 4 - comment utiliser le mixage de requêtes multimédia

Comment définir un point d'arrêt média, de moyen à grand, dois-je imbriquer les options min mixin et max mixin ou comment procéder?.

la sortie que je cherche ressemble à ceci: @media (min-width: 480px) et (max-width: 767px) en utilisant le mixin de points d'arrêt.

twitter-bootstrapsass
18
user1678736

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

Dépendances

Les mixins sont déclarés dans mixins/_breakpoints.scss et dépendent de la carte $ grid-breakpoints, trouvée dans _variables.scss.

Exemple

Carte des points d'arrêt: 

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

Mixin: 

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

Compile à 

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

Avis important

Le point d'arrêt média entre mixin utilise les valeurs «inférieure» et «supérieure» du point d'arrêt déclaré. 

  • La valeur 'inférieure' du point d'arrêt est la valeur déclarée dans la carte $ Grille-points d'arrêt.

  • La valeur 'supérieure' du point d'arrêt spécifique est égale à la valeur de Point d'arrêt supérieur moins 1px.

Exemple de valeurs de points d'arrêt supérieur et inférieur ((basé sur od $ carte des points d'arrêt de la grille))

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)

Autres mélanges de médias

@include media-breakpoint-up(sm) {} crée un point d'arrêt avec une largeur minimale de $sm. 

@include media-breakpoint-down(md) {} crée un point d'arrêt avec une largeur maximale de $md. 

38
Edd

Voici aussi mixin media-breakpoint-between($lower, $upper)

Donc, cela devrait fonctionner

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

Vous faites un combo de deux classes . (BS4 utilise aussi rems et non px.)

Exemple ... (De: 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 -->
1
Jay