Responsif, le monde est responsssiiiiif

Comme si le blog n'avait pas subit assez de changements, j'en rajoute encore une louche, et cette fois, j'ai passé le thème à la version 2.0 de Twitter Bootstrap pour deux raisons :

Parce que j'voulais encore "minimaliser" un peu le design du blog
Parce que le responsive c'est l'avenir qui t'arrache la tronche !

Pour celles et ceux qui n'ont pas encore entendu Web Design Responsive il s'agit, en résumé, du fait d'adapter la mise en page en fonction de la largeur du navigateur pour ainsi avoir un site qui passe sur un écran de mobile, de tablette, et d'ordinateur de bureau simplement grâce aux CSS. Et ça, c'est beau.

Mais comment ça marche tout ça ? Le coeur du responsif, c'est l'utilisation des media queries (on applique du CSS en fonction de différentes propriétés de la fenêtre)

 // Mobiles en paysage et plus petit
  @media (max-width: 480px) { ... }

  // Mobiles plus large jusqu'aux tablettes
  @media (max-width: 768px) { ... }

  // Tablettes en portrait jusqu'au bureau
  @media (min-width: 768px) and (max-width: 980px) { ... }

  // Les bureaux "larges"
  @media (min-width: 1200px) { .. }

À partir de ça et de différentes astuces on peut faire très facilement un webdesign qui s'adapte parfaitement à toutes les tailles d'écran, jusqu'aux plus petites.

Un peu de lecture sur le Responsive Web Design

Responsif, le monde est responsssiiiiif

Partager :

Vous pourriez aimer