Bootstrap 3 points de rupture et requêtes médias

Question

Sur la documentation des requêtes média de Bootstrap 3, il est dit :

Nous utilisons les requêtes média suivantes dans nos fichiers Less pour créer les points de rupture clés de notre système de grille.

Petits appareils (téléphones, moins de 768px) : Aucune requête média puisque c'est la valeur par défaut dans Bootstrap

Appareils de taille moyenne (tablettes, 768px et plus) : @media (min-width: @screen-sm-min) { ... }

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

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

Devrions-nous également pouvoir utiliser les noms @screen-sm, @screen-md et @screen-lg dans nos requêtes média ? Parce que cela ne fonctionne pas pour moi. Je dois utiliser des mesures en pixels telles que @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 petits appareils est-elle une coquille ? Ne devrait-on pas dire jusqu'à 767px ? (depuis retiré de la documentation)

Answer 1

@media écran et (max-largeur : 767px) {

}

@media écran et (min-largeur : 768px) et (max-largeur : 991px) {

}

@media seulement écran et (min-largeur-appareil : 768px) et (max-largeur-appareil : 1024px) et (orientation : paysage) {

}

@media écran et (min-largeur : 992px) {

}