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


172

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 )



Voici les sélecteurs utilisés dans BS4. 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) {}
Babbandeep Singh

Réponses:


208

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


8
@ CyrilDuchon-Doris, la question portait sur Bootstrap 3 ... donc je ne pense pas.
Bagata

12
La réponse a obtenu 30 points et mentionne Bootstrap 2. Beaucoup de gens y jetteront un coup d'œil même s'ils n'utilisent pas Bootstrap 3. Je suis toujours très reconnaissant aux personnes qui modifient leur propre réponse avec des informations à jour, même si elles sont légèrement en retrait de la portée initiale.
Cyril Duchon-Doris

est donc très petit quelque chose en dessous de 479?
SuperUberDuper

2
Bootstrap v4 n'est même pas encore stable. En êtes-vous conscient? La réponse devra peut-être être mise à jour plusieurs fois avant d'atteindre une version stable.
Gherman

Je crois qu'il y a ici l'erreur d'un pixel, qui peut effectivement avoir un effet. Pour les écrans de 1 200 px et 320 px, la requête multimédia maximale et la requête multimédia minimale prendront effet. Toutes les requêtes multimédias maximales doivent être moins 1px (1199px par exemple). Les requêtes multimédias min et max 320px n'ont pas vraiment de sens pour moi, car AFAIK commence pratiquement à 320px.
Ben Carp le

39

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.


6
Pour voir cela en action, accédez à cet exemple sur leur site et redimensionnez votre fenêtre pour voir comment elle traite la conception après 768 pixels. // Qu'est-ce que cela a à voir avec 480px? Je ne vois rien de différent à 480 pixels par rapport à, disons, 500 pixels.
Kris Hunt

En ce qui concerne l'extension naturelle du système variable de Bootstrap 3, cela devrait être la réponse acceptée, car c'est une approche très efficace.
klewis

28

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) */
    }
}

1
Désolé, je ne comprends pas la valeur ajoutée de cette fourche. Comme je comprends que vous faites @screen-hs-min:@screen-xs;. Pourquoi ne pas utiliser @screen-xsdirectement ici?
Bass Jobsen

Juste pour une meilleure compréhension. Cette variable donne une cohérence visuelle au modèle. Bootstrap 3 est Mobile First, donc toutes les règles en dehors de media-query concernent la taille du mobile. Ensuite, si vous avez besoin d'une règle supplémentaire pour HS, vous l'écrivez min-width: @screen-hs-min, si vous avez besoin d'une règle estra pour SM, vous l'écrivez min-width: @screen-sm-min, et ainsi de suite. Ce fork est utilisé pour ajouter un nouveau point d'arrêt à 480px. Ensuite, la taille du mobile est inférieure à 480px et une nouvelle taille (HS) apparaît entre 480px et 768px
Antonio Espinosa

Notez que le modèle a une petite faute de frappe. screen-hs-min devrait être screen-xs-min
eflat

@eflat ce n'est pas une erreur de frappe, screen-hs-minest une nouvelle règle entre screen-xs-minetscreen-sm-min
Antonio Espinosa

7

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

}

1
Exactement ce dont j'avais besoin merci! Donc je n'ai pas besoin de tout recommencer :)
antoni

N'oubliez pas non plus les cours .visible-xs-inline, .visible-xs-inline-block chaque fois que vous remplacez .visible-xs!
antoni

6

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


2

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

1

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

0

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.


0

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


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



}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.