Responsive Web Design

De Banane Atomic
Révision datée du 6 juillet 2016 à 10:43 par Nicolas (discussion | contributions) (→‎Outils)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigationAller à la recherche

Définition du RWD

Permet de trouver une solution d’affichage pour les différentes tailles d'écran.

Les différents designs

statique on suppose la taille de l'écran de l'utilisateur et on donne une taille statique à nos éléments

si l'écran est trop petit, des barres de défilement apparaissent

fluide les tailles des éléments sont données de manière proportionnelle afin qu'ils s'adaptent à la taille de l'écran
adaptatif une feuille de style par groupe de résolutions d'écran
RWD amélioration du design adaptatif, l'affichage correspond à la taille exacte de l'écran plutôt qu'à un groupe de résolutions d'écran

Outils

  • Firefox (Tools → Web Developer → Responsive Design View): visualisation de différentes résolutions
  • Firebreak (extension Firefox): visualisation plus précise de différentes résolutions
  • Responsive Test