Médias-queries et points d'arrêt de Bootstrap 5
// Appareils très petits (téléphones en mode portrait, moins de 576px)
// Aucune requête média pour `xs` car c'est la valeur par défaut dans Bootstrap
// Petits appareils (téléphones en mode paysage, 576px et plus)
@media (min-width: 576px) { ... }
// Appareils moyens (tablettes, 768px et plus)
@media (min-width: 768px) { ... }
// Grands appareils (ordinateurs de bureau, 992px et plus)
@media (min-width: 992px) { ... }
// Appareils extra grands (grand écrans de bureau, 1200px et plus)
@media (min-width: 1200px) { ... }
// Appareils très grands (écrans de bureau plus larges, 1400px et plus)
@media (min-width: 1400px) { ... }
Largeur minimale
// Mixins source
// Aucune requête média nécessaire pour le point d'arrêt `xs` car c'est effectivement `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }
// Utilisation
// Exemple : Masquer à partir de `min-width: 0`, puis afficher au point d'arrêt `sm`
.custom-class {
display: none;
}
@include media-breakpoint-up(sm) {
.custom-class {
display: block;
}
}
Largeur maximale
// Aucune requête média nécessaire pour le point d'arrêt `xs` car c'est effectivement `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }
// Exemple : Style à partir du point d'arrêt moyen et en descendant
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
Médias-queries et points d'arrêt de Bootstrap 4
// Appareils très petits (téléphones en mode portrait, moins de 576px)
// Aucune requête média car c'est la valeur par défaut dans Bootstrap
// Petits appareils (téléphones en mode paysage, 576px et plus)
@media (min-width: 576px) { ... }
// Appareils moyens (tablettes, 768px et plus)
@media (min-width: 768px) { ... }
// Grands appareils (ordinateurs de bureau, 992px et plus)
@media (min-width: 992px) { ... }
// Appareils extra grands (grand écrans de bureau, 1200px et plus)
@media (min-width: 1200px) { ... }
Bootstrap 4 fournit des CSS source en Sass que vous pouvez inclure via des mixins Sass :
@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) { ... }
// Exemple d'utilisation :
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
Médias-queries et points d'arrêt de Bootstrap 3
/*========== Méthode Mobile First ==========*/
/* Personnalisé, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Appareils très petits, téléphones */
@media only screen and (min-width : 480px) {
}
/* Petits appareils, tablettes */
@media only screen and (min-width : 768px) {
}
/* Appareils moyens, ordinateurs de bureau */
@media only screen and (min-width : 992px) {
}
/* Grands appareils, écrans larges */
@media only screen and (min-width : 1200px) {
}
/*========== Méthode Non-Mobile First ==========*/
/* Grands appareils, écrans larges */
@media only screen and (max-width : 1200px) {
}
/* Appareils moyens, ordinateurs de bureau */
@media only screen and (max-width : 992px) {
}
/* Petits appareils, tablettes */
@media only screen and (max-width : 768px) {
}
/* Appareils très petits, téléphones */
@media only screen and (max-width : 480px) {
}
/* Personnalisé, iPhone Retina */
@media only screen and (max-width : 320px) {
}
Médias-queries et points d'arrêt de 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) {
}
Ressources :
