Sommaire

Le Responsive Web Design GRILLE ADAPTATIVE:Responsive Web Design

1. Le design adaptatif GRILLE ADAPTATIVE:Design adaptatif

La désignation la plus courante de cette technique est le Responsive Web Design. Vous trouverez aussi plus simplement le responsive design, voire le RWD. Notez que nos amis québécois le nomment conception de sites web adaptatifs, c’est pour cela que vous trouverez aussi le terme de design adaptatif dans de nombreux textes en français.

Actuellement avoir un site qui s’affiche correctement sur n’importe quel type d’écran est impératif, presque une évidence. La consultation du Web ne se fait plus que sur ordinateur, elle se fait aussi en grande partie sur les tablettes et les smartphones.

2. Les requêtes de média GRILLE ADAPTATIVE:Requêtes de média GRILLE ADAPTATIVE:Media Queries

Pour concevoir un design adaptatif, il faut connaître les dimensions d’affichage des écrans de consultation. C’est l’objectif des Media Queries CSS3 qui est une recommandation officielle du W3C (http://www.w3.org/TR/css3-mediaqueries/).

Les Media Queries (ou requêtes de média en français) permettent de définir des styles CSS qui vont s’appliquer selon la taille des écrans de diffusion.

Les requêtes de média peuvent s’utiliser dans le <head>, dans un élément <link> classique. Voyons cet exemple :

<link rel="stylesheet" media="screen and (max-width: 640px)" ...