web-dev-qa-db-fra.com

Bootstrap 3 points d'arrêt et requêtes multimédia

Sur le documentation relative aux requêtes de support Bootstrap , il est indiqué:

Nous utilisons les requêtes de média suivantes dans nos fichiers Less pour créer les points d'arrêt clés dans notre système de grille.

Extra petits appareils (téléphones, moins de 768px): Aucune requête multimédia car il s'agit de la valeur par défaut dans Bootstrap

Petits appareils (tablettes, 768px et plus): @media (min-width: @screen-sm-min) { ... }

Périphériques moyens (ordinateurs de bureau, 992px et plus): @media (min-width: @screen-md-min) { ... }

Gros appareils (grands ordinateurs de bureau, 1200px et plus): @media (min-width: @screen-lg-min) { ... }

Sommes-nous censés pouvoir utiliser les noms @screen-sm, @screen-md et @screen-lg dans nos requêtes sur les médias? Parce que ça ne marche pas pour moi. Je dois utiliser des mesures en pixels telles que @media (min-width: 768px) {...} avant que cela fonctionne. Est-ce que je fais quelque chose de mal?

De plus, la référence à 480px pour les très petits appareils est-elle une faute de frappe? Cela ne devrait-il pas dire jusqu'à 767px? ( depuis retiré de la documentation )

twitter-bootstraptwitter-bootstrap-3media-queriesbreakpoints
146
Kris Hunt

Bootstrap 4 Requêtes de média

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Bootstrap 4 fournit le code source CSS dans Sass que vous pouvez inclure via Sass Mixins:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Bootstrap 3 Requêtes de média

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}



/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {

}

Bootstrap 2.3.2 Requêtes de média

@media only screen and (max-width : 1200px) {

}

@media only screen and (max-width : 979px) {

}

@media only screen and (max-width : 767px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width : 320px) {

}

Ressource de: https://scotch.io/quick-tips/default-sizes-for-Twitter-bootstraps-media-queries

171
Sophy

Bootstrap ne documente pas très bien les requêtes multimédia. Ces variables de @screen-sm, @screen-md, @screen-lg font référence à des variables LESS et non à de simples CSS.

Lorsque vous personnalisez Bootstrap, vous pouvez modifier les points d'arrêt de la requête de support. Lors de la compilation, les variables @ screen-xx sont modifiées pour la largeur de pixel que vous avez définie en tant que screen-xx. C’est ainsi qu’un tel cadre peut être codé une fois, puis personnalisé par l’utilisateur final pour répondre à ses besoins.

Une question similaire à ce sujet pourrait fournir plus de clarté: requêtes de support Bootstrap 3.

Dans votre CSS, vous devrez toujours utiliser les requêtes de média traditionnelles pour remplacer ou ajouter à ce que fait Bootstrap.

En ce qui concerne votre deuxième question, ce n'est pas une faute de frappe. Une fois que l'écran passe en dessous de 768 pixels, la structure devient complètement fluide et se redimensionne à n'importe quelle largeur de périphérique, éliminant ainsi le besoin de points d'arrêt. Le point d'arrêt à 480px existe, car des modifications spécifiques ont été apportées à la présentation pour l'optimisation mobile.

Pour voir cela en action, consultez cet exemple sur leur site ( http://getbootstrap.com/examples/navbar-fixed-top/ ), et redimensionnez votre fenêtre pour voir comment elle traite le dessin. après 768px.

38
Lance Turri

Ce problème a été abordé dans https://github.com/twbs/bootstrap/issues/102 Il n’est pas prévu de changer de grille pour des raisons de compatibilité.

Vous pouvez obtenir Bootstrap à partir de cette fourche, branche hs: https://github.com/antespi/bootstrap/tree/hs

Cette branche vous donne un point d'arrêt supplémentaire à 480px, vous devez donc:

  1. Design for mobile first (XS, moins de 480px)
  2. Ajoutez des classes HS (Horizontal Small Devices) dans votre code HTML: col-hs- *, visible-hs, ... et concevez des appareils mobiles horizontaux (HS, moins de 768px)
  3. Conception pour tablettes (SM, moins de 992px)
  4. Conception pour les appareils de bureau (MD, moins de 1200px)
  5. Conception pour les gros appareils (LG, plus de 1200px)

Il est essentiel de concevoir Mobile d'abord pour comprendre Bootstrap 3. Il s'agit du principal changement par rapport à BootStrap 2.x. En règle générale, vous pouvez suivre ceci (dans MOINS):

.template {
    /* rules for mobile vertical (< 480) */

    @media (min-width: @screen-hs-min) {
       /* rules for mobile horizontal (480 > 768)  */
    }
    @media (min-width: @screen-sm-min) {
       /* rules for tablet (768 > 992) */
    }
    @media (min-width: @screen-md-min) {
       /* rules for desktop (992 > 1200) */
    }
    @media (min-width: @screen-lg-min) {
       /* rules for large (> 1200) */
    }
}
23
Antonio Espinosa

Je sais que c'est un peu vieux, mais je pensais contribuer. En me basant sur la réponse de @Sophy, voici ce que j'ai fait pour ajouter un point d'arrêt .xxs. Je ne me suis pas occupé des classes visibles-inline, table.visible, etc.

/*==========  Mobile First Method  ==========*/

  .col-xxs-12, .col-xxs-11, .col-xxs-10, .col-xxs-9, .col-xxs-8, .col-xxs-7, .col-xxs-6, .col-xxs-5, .col-xxs-4, .col-xxs-3, .col-xxs-2, .col-xxs-1 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left;
  }

.visible-xxs {
  display:none !important;
}

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) and (max-width:479px) {

  .visible-xxs {
    display: block !important;
  }
  .visible-xs {
    display:none !important;
  }

  .hidden-xs {
    display:block !important;
  }

  .hidden-xxs {
    display:none !important;
  }

  .col-xxs-12 {
    width: 100%;
  }
  .col-xxs-11 {
    width: 91.66666667%;
  }
  .col-xxs-10 {
    width: 83.33333333%;
  }
  .col-xxs-9 {
    width: 75%;
  }
  .col-xxs-8 {
    width: 66.66666667%;
  }
  .col-xxs-7 {
    width: 58.33333333%;
  }
  .col-xxs-6 {
    width: 50%;
  }
  .col-xxs-5 {
    width: 41.66666667%;
  }
  .col-xxs-4 {
    width: 33.33333333%;
  }
  .col-xxs-3 {
    width: 25%;
  }
  .col-xxs-2 {
    width: 16.66666667%;
  }
  .col-xxs-1 {
    width: 8.33333333%;
  }
  .col-xxs-pull-12 {
    right: 100%;
  }
  .col-xxs-pull-11 {
    right: 91.66666667%;
  }
  .col-xxs-pull-10 {
    right: 83.33333333%;
  }
  .col-xxs-pull-9 {
    right: 75%;
  }
  .col-xxs-pull-8 {
    right: 66.66666667%;
  }
  .col-xxs-pull-7 {
    right: 58.33333333%;
  }
  .col-xxs-pull-6 {
    right: 50%;
  }
  .col-xxs-pull-5 {
    right: 41.66666667%;
  }
  .col-xxs-pull-4 {
    right: 33.33333333%;
  }
  .col-xxs-pull-3 {
    right: 25%;
  }
  .col-xxs-pull-2 {
    right: 16.66666667%;
  }
  .col-xxs-pull-1 {
    right: 8.33333333%;
  }
  .col-xxs-pull-0 {
    right: auto;
  }
  .col-xxs-Push-12 {
    left: 100%;
  }
  .col-xxs-Push-11 {
    left: 91.66666667%;
  }
  .col-xxs-Push-10 {
    left: 83.33333333%;
  }
  .col-xxs-Push-9 {
    left: 75%;
  }
  .col-xxs-Push-8 {
    left: 66.66666667%;
  }
  .col-xxs-Push-7 {
    left: 58.33333333%;
  }
  .col-xxs-Push-6 {
    left: 50%;
  }
  .col-xxs-Push-5 {
    left: 41.66666667%;
  }
  .col-xxs-Push-4 {
    left: 33.33333333%;
  }
  .col-xxs-Push-3 {
    left: 25%;
  }
  .col-xxs-Push-2 {
    left: 16.66666667%;
  }
  .col-xxs-Push-1 {
    left: 8.33333333%;
  }
  .col-xxs-Push-0 {
    left: auto;
  }
  .col-xxs-offset-12 {
    margin-left: 100%;
  }
  .col-xxs-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-xxs-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-xxs-offset-9 {
    margin-left: 75%;
  }
  .col-xxs-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-xxs-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-xxs-offset-6 {
    margin-left: 50%;
  }
  .col-xxs-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-xxs-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-xxs-offset-3 {
    margin-left: 25%;
  }
  .col-xxs-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-xxs-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-xxs-offset-0 {
    margin-left: 0%;
  }

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

  .visible-xs {
    display:block !important;
  }

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

  .visible-xs {
    display:none !important;
  }

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}
7
Enrico

La référence à 480px a été supprimée. Au lieu de cela il dit:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

Il n'y a pas de point d'arrêt inférieur à 768 pixels dans Bootstrap 3.

Si vous voulez utiliser le @screen-sm-min et d'autres mixins, vous devez compiler avec LESS, voir http://getbootstrap.com/css/#grid-less

Voici un tutoriel sur la façon d'utiliser Bootstrap 3 et LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

6
Anthony

Vous devriez pouvoir utiliser ces points d'arrêt si vous utilisez http://lesscss.org/ pour construire votre CSS.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }

De https://getbootstrap.com/docs/3.4/css/#grid-media-queries

En fait, @screen-sm-min est une variable remplacée par la valeur spécifiée dans _variable lors de la génération avec Less. Si vous n'utilisez pas Less, vous pouvez remplacer cette variable par la valeur:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

Bootstrap 3 prend officiellement en charge Sass: https://github.com/twbs/bootstrap-sass . Si vous utilisez Sass (et vous devriez), la syntaxe est un peu différente.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { }

/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {  }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {  }
2
gagarine

Voici les sélecteurs utilisés dans Bootstrap 4. Il n'y a pas de paramètre "plus bas" dans BS4 car "extra petit" est la valeur par défaut. C'est à dire. vous coderiez d’abord la taille XS, puis ces remplacements de média.

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
1
Babbandeep Singh

quand j'utilise @media (largeur maximale: 768px), ma conception casse sur 768px. Mais c'est ok sur 767px et aussi sur 769px. Donc, je pense que ce sera 767px comme max-width pour cibler les petits appareils.

0
Xuwel Khan

for bootstrap 3 J'ai le code suivant dans mon composant navbar

/**
 * Navbar styling.
 */
@mobile:          ~"screen and (max-width: @{screen-xs-max})";
@tablet:          ~"screen and (min-width: @{screen-sm-min})";
@normal:          ~"screen and (min-width: @{screen-md-min})";
@wide:            ~"screen and (min-width: @{screen-lg-min})";
@grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";

alors vous pouvez utiliser quelque chose comme

@media wide { selector: style }

Ceci utilise la valeur que vous avez définie pour les variables.

Échapper vous permet d'utiliser n'importe quelle chaîne arbitraire en tant que propriété ou valeur de variable. Tout ce qui se trouve dans ~ "n'importe quoi" ou ~ 'n'importe quoi' est utilisé tel quel, sans changement sauf une interpolation.

http://lesscss.org

0
Daniel