Bootstrap 4 medias queries
Ces points d'arrêt sont principalement basés sur les largeurs minimales de la fenêtre et nous permettent de redimensionner des éléments à mesure que celle-ci change.
// Très petits appareils (Téléphone mode portrait, moins de 576px)
// Il n'y a plus de media query 'xs'.
// Petits appareils (Téléphone mode paysage, 576px et plus)
@media (min-width: 576px) { ... }
// Appareils de taille moyenne (tablettes, 768px et plus)
@media (min-width: 768px) { ... }
// Appareils assez larges (ordinateurs, 992px et plus)
@media (min-width: 992px) { ... }
// Appareils très larges (ordinateurs larges, 1200px et plus)
@media (min-width: 1200px) { ... }Nous utilisons parfois des medias-queries qui vont dans l'autre sens (taille d'écran donnée ou inférieure):
// Petits appareils (Téléphone mode portrait, moins que 576px)
@media (max-width: 575.98px) { ... }
// Petits appareils (Téléphone mode paysage, moins que 768px)
@media (max-width: 767.98px) { ... }
// Appareils de taille moyenne (tablettes, moins que 992px)
@media (max-width: 991.98px) { ... }
// Appareils assez larges (ordinateurs, moins que 1200px)
@media (max-width: 1199.98px) { ... }
// Appareils très larges (ordinateurs)
// Plus de medias queries pour 'xl'Il existe également des medias-queries et des mixins permettant de cibler un seul segment de tailles d'écran en utilisant les largeurs minimale et maximale des points d'arrêt.
// Très petits appareils (Téléphone mode portrait, moins que 576px)
@media (max-width: 575.98px) { ... }
// Petits appareils (Téléphone mode paysage, 576px et plus)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Appareils de taille moyenne (tablettes, 768px et plus)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Appareils assez larges (ordinateurs, 992px et plus)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Appareils très larges (ordinateurs, 1200px et plus)
@media (min-width: 1200px) { ... }A très bientôt,
Mathieu