C’est quoi les Media Queries ?
Octobre 2011Les Media Queries permettent d’afficher un site Internet aux dimensions (ou particularités) du média sur lequel il est regardé : écran couleur, tablette, smartphone, kindle, etc.
Techniquement il s’agit d’une nouveauté apparue avec le CSS3 :
On définit une feuille de style par média ou caractéristiques d’un média. Il est, par exemple, possible de créer trois feuilles de styles pour Iphone : une pour le format paysage, une autre pour le portrait et une dernière pour le Retina Display.
L’avantage des Media Queries est la réorganisation des blocs d’un site, évitant ainsi à l’internaute de devoir zoomer sur chaque bloc ou devoir ’scroller’ horizontalement ou verticalement. Fini donc l’impression de regarder un site sur un écran trop petit.
Ce site (AA Studio) a été développé en utilisant les MQ. La version smartphone nécessitant un long scroll horizontal, un menu vient automatiquement s’afficher en haut de page (après la phrase d’introduction). A contrario, la version écran étant suffisamment grande, on n’affichera pas de menu.
Les Media Queries font parties, avec les grilles fluides et les images flexibles, de ce que l’on appelle le Responsive Web Design - terme inventé par Ethan Marcotte, et inspiré de la Responsive Architecture. Ces trois ’disciplines, mises ensemble, permettent réellement d’adapter au mieux un site pour différents médias.
Pour voir de nombreux exemples, un petit tour sur le site de référence : http://www.mediaqueri.es
Un peu de lecture : Responsive Web Design
