Dans la documentation des requêtes multimédias Bootstrap 3, il est dit:

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

Appareils très petits (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) { ... }

Appareils de taille moyenne (ordinateurs de bureau, 992 pixels et plus): @media (min-width: @screen-md-min) { ... }

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

Sommes - nous censés pouvoir utiliser les @screen-sm, @screen-mdet les @screen-lgnoms dans nos requêtes des médias aussi bien? Parce que ça ne marche pas pour moi. Je dois utiliser des mesures de pixels comme @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 appareils très petits est-elle une faute de frappe? Cela ne devrait-il pas dire jusqu'à 767px? ( depuis retiré de la documentation )

Requêtes multimédias Bootstrap 4

// 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 CSS source 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;
  }
}

Requêtes multimédias Bootstrap 3

/*==========  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) {

}

Requêtes multimédias Bootstrap 2.3.2

@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

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

Lorsque vous personnalisez Bootstrap, vous pouvez modifier les points d'arrêt de la requête multimédia et lors de la compilation, les variables @ screen-xx sont remplacées par la largeur de pixel que vous avez définie comme screen-xx. C'est ainsi qu'un cadre comme celui-ci peut être codé une fois, puis personnalisé par l'utilisateur final pour répondre à ses besoins.

Une question similaire ici qui pourrait apporter plus de clarté: Requêtes multimédias Bootstrap 3.0

Dans votre CSS, vous devrez toujours utiliser des requêtes multimédias 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, le cadre devient complètement fluide et se redimensionne à n'importe quelle largeur de périphérique, supprimant ainsi le besoin de points d'arrêt. Le point d'arrêt à 480px existe car des modifications spécifiques se produisent dans la mise en page pour l'optimisation mobile.

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

Ce problème a été discuté dans https://github.com/twbs/bootstrap/issues/10203 À l'heure actuelle, il n'est pas prévu de changer Grid 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. Conception pour le mobile d'abord (XS, moins de 480 pixels)
2. Ajoutez des classes HS (Horizontal Small Devices) dans votre HTML: col-hs- *, visible-hs, ... et conception pour les appareils mobiles horizontaux (HS, moins de 768px)
3. Conception pour les tablettes (SM, moins de 992 pixels)
4. Conception pour les appareils de bureau (MD, moins de 1 200 pixels)
5. Conception pour les gros appareils (LG, plus de 1200 px)

Concevoir d'abord le mobile est la clé pour comprendre Bootstrap 3. C'est le changement majeur par rapport à BootStrap 2.x. En tant que modèle de règle, vous pouvez suivre ceci (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) */
    }
}

Je sais que c'est un peu vieux, mais j'ai pensé que je contribuerais. En me basant sur la réponse de @Sophy, c'est ce que j'ai fait pour ajouter un point d'arrêt .xxs. Je n'ai pas pris en charge les classes visible-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) {

}

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

Si vous souhaitez utiliser les @screen-sm-minmixins et d'autres, vous devez compiler avec LESS, voir http://getbootstrap.com/css/#grid-less

Voici un tutoriel sur l'utilisation de Bootstrap 3 et LESS: http://www.helloerik.com/bootstrap-3-less-workflow-tutorial

Vous devriez pouvoir utiliser ces points d'arrêt si vous utilisez http://lesscss.org/ pour créer 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) {  }

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

En fait, @screen-sm-minest une variable qui est remplacée par la valeur spécifiée _variablelors de la construction 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) {  }

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

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

lorsque j'utilise @media (max-width: 768px) ma conception se brise sur 768px. Mais c'est correct sur 767px et aussi sur 769px. Donc, je pense que la largeur maximale sera de 767 pixels pour cibler les petits appareils.

pour 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 }

Cela utilise la valeur sur laquelle vous avez défini les variables.

L'échappement vous permet d'utiliser n'importe quelle chaîne arbitraire comme propriété ou valeur de variable. Tout ce qui se trouve à l'intérieur de ~ "n'importe quoi" ou de ~ "n'importe quoi" est utilisé tel quel sans aucun changement sauf l'interpolation.

http://lesscss.org

@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) {



}