Dimensions du responsive design et Boostrap Grid System

Viewport

Premier chose avant de se lancer dans le css d’un site responsive design, inscrire dans le head :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Cette information mise dans le header va éviter de nombreux soucis lors de l’affichage du site sur les smartphones et autres tablettes

Dimensions officielles

Dans ce tableau, vous avez les largeurs moyennes en fonction du hardware et de leur orientation :

Largeur de référence Hardware et orientation Média query
=< 320 px

smartphone portrait

@media (max-width: 320px) {
}
> 320 px && =< 480 px

smartphone paysage

@media (min-width: 321px) 
and (max-width: 480px) {
}
> 480 px && =< 768 px

tablette portrait

@media (min-width: 481px) 
and (max-width: 768px) {
}
> 768 px && =< 960 px

tablette paysage

@media (min-width: 769px) 
and (max-width: 960px) {
}
> 960 px

ordinateur

@media (min-width: 961px) {
}

Grid system de Bootstrap

Le système de grille de Twitter Boostrap est vraiment super pour se lancer rapidement dans la réalisation d’un design responsive. Par rapport aux dimensions officielles, il dispose de certaines spécificités :

Largeur de référence Hardware et orientation Appellation, class et media query
< 768 px

smartphone portrait

smartphone paysage

tablette portrait

Extra small devices

.col-xs-

@media (max-width: 768px) {
}
=> 768 px

tablette paysage

Small devices

.col-sm-

@media (min-width: 768px) {
}
=> 992px

ordinateur

Medium devices

.col-md-

@media (min-width: 992px) {
}
=> 1200px

ordinateur

Large devices

.col-lg-

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

Conclusion

Lorsque l’on utilise le systeme de grid de Boostrap, il faut noter que :

  • il n’y a pas de class spécifique pour les smartphones, il faut ajouter des media query spécifiques pour gérer ce type d’affichage,
  • les class s’applique à partir d’une largeur de l’écran et non pour un hardware particulier. Les appellations donnent l’impression que la class s’applique QUE pour un hardware mais en fait c’est plutôt pour le hardware et les hardwares de taille supérieure.