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 :

@media (max-width: 320px) {
}

@media (min-width: 321px) 
and (max-width: 480px) {
}

@media (min-width: 481px) 
and (max-width: 768px) {
}

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

@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 :

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

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

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

@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.