Bootstrap 3 points d'arrêt et les demandes des médias

Question

Bootstrap 3 points d'arrêt et les demandes des médias

Sur http://getbootstrap.com/css/ il dit:

nous utilisons les requêtes médias suivantes pour créer les points critiques dans notre système de grille.

petits appareils supplémentaires (téléphones, jusqu'à 480px): Pas de requête média puisque c'est la valeur par défaut dans Bootstrap

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

dispositifs moyens (ordinateurs de bureau, 992px et jusqu'): @media (min-width: @screen-md) { ... }

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

sommes-nous censés pouvoir utiliser les noms @screen-sm, @screen-md et @screen-lg dans nos requêtes médias? Parce qu'il ne fonctionne pas pour moi. Je dois utiliser des mesures de pixels comme @media (min-width: 768px) {...} avant qu'il fonctionne. Suis-je en train de faire quelque chose de mal?

aussi, est-ce que la référence à 480px pour les petits appareils supplémentaires est une faute de frappe? Ça ne devrait pas dire jusqu'à 767px?

122

breakpoints media-queries twitter-bootstrap twitter-bootstrap-3

demandé sur Cyril Duchon-Doris 2013-10-25 18:46:10

10 réponses

score 127 · Answer 1

Bootstrap 4 Media Queries

// 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 la 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 Media Queries

/*==========  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 Media Queries

@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 : https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries

score 35 · Answer 2

Bootstrap ne documente pas très bien les requêtes des médias. Ces variables @screen-sm , @screen-md , @screen-lg se réfèrent en fait à moins de variables et pas simple CSS.

lorsque vous personnalisez Bootstrap, vous pouvez changer les points de rupture de la requête multimédia et lorsqu'elle compile les variables @screen-xx sont changées à n'importe quelle largeur de pixel que vous avez défini comme screen-xx. C'est ainsi qu'un cadre comme celui-ci peut être codé une fois puis personnalisé par l'utilisateur final pour s'adapter leurs besoins.

une question similaire ici qui pourrait fournir plus de clarté: Bootstrap 3.0 requêtes médias

dans votre CSS, vous devrez toujours utiliser les requêtes médias traditionnelles pour outrepasser ou ajouter à ce que Bootstrap fait.

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 768px le cadre devient complètement fluide et redimensionne à n'importe quelle largeur de périphérique, en enlevant le le besoin pour les points d'arrêt. Le point de rupture à 480px existe parce qu'il y a des changements spécifiques qui se produisent à la disposition pour l'optimisation mobile.

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

score 22 · Answer 3

cette question a été discutée dans https://github.com/twbs/bootstrap/issues/10203 À l'heure actuelle, il n'est pas prévu de changer la grille pour des raisons de compatibilité.

vous pouvez obtenir Bootstrap de cette fourche, branche hs: https://github.com/Teachnova/bootstrap/tree/hs

cette branche vous donne un point de rupture supplémentaire à 480px, donc vous devez:

Design pour mobile la première (XS, moins de 480px)
ajouter les classes HS (Horizontal Small Devices) dans votre HTML: col-hs-*, visible-hs, ... et la conception pour les appareils mobiles horizontaux (HS, moins de 768px)
la Conception des appareils de type tablette (SM, moins de 992px)
Conception pour les périphériques de bureau (MD, moins de 1200px)
Conception pour les gros appareils (LG, plus de 1200px)

Design mobile est le premier la clé pour comprendre Bootstrap 3. C'est le changement majeur de BootStrap 2.x. En règle générale, vous pouvez suivre ce modèle (en 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) */
    }
}

score 7 · Answer 4

je sais que c'est un peu vieux, mais j'ai pensé que je voudrais contribuer. En me basant sur la réponse de @Sophy, c'est ce que j'ai fait pour ajouter un .point de rupture xxs. Je n'ai pas pris soin de visible en ligne, tableau.visibles, les classes 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) {

}

score 6 · Answer 5

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 de rupture en dessous de 768px dans Bootstrap 3.

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

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

score 2 · Answer 6

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 http://getbootstrap.com/css/#grid-media-queries

en fait @screen-sm-min est une variable qui est remplacée par la valeur spécifiée dans _variable lorsque construit avec moins. Si vous n'utilisez pas moins, 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 soutient officiellement sass https://github.com/twbs/bootstrap-sass . Si vous utilisez le 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) {  }

score 1 · Answer 7

Voici les sélecteurs utilisés dans Bootstrap 4. Il n'y a pas de paramètre" le plus bas "dans BS4 parce que" extra small " est la valeur par défaut. C'est-à-dire: vous devriez d'abord coder la taille XS et ensuite avoir ces dérogations médias après.

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

score 0 · Answer 8

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

score 0 · Answer 9

si vous utilisez moins vous pouvez utiliser ces deux points d'arrêt supplémentaires qui fonctionnent (testé!): https://github.com/brgrz/bootstrap-breakpoints

HTH

score -6 · Answer 10

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

}

@media screen and (min-width: 768px) and (max-width: 991px){


}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){


}

@media screen and (min-width: 992px) {



}

Las etiquetas más populares

Bootstrap 3 points d'arrêt et les demandes des médias

10 réponses

Bootstrap 4 Media Queries

Bootstrap 3 Media Queries

Bootstrap 2.3.2 Media Queries