Responsive Design en CSS3 Responsive Web Design : les Media Queries CSS3
Le Web est de plus en plus consulté sur des périphériques de petite taille (téléphones, tablettes, netbooks). C'est pourquoi il est très important d'adapter l'affichage de vos pages web à ces nouveaux modes de consultation. Les techniques qui y sont relatives relèvent du Responsive Web Design (conception de sites web adaptatifs ou réactifs en français).
Les Media Queries du langage CSS3 proposent une solution simple, élégante et très efficace à ce problème. Ils permettent en effet de définir le style d'une page web en fonction de plusieurs facteurs liés à la surface d'affichage : la largeur, la hauteur, l'orientation, la résolution, etc. Cerise sur le gâteau : la plupart des navigateurs actuels (Internet Explorer, Firefox, Firefox Mobile, Chrome, Safari, Safari Mobile, iOS Safari, Android, Opera Mini, Opera Mobile et BlackBerry) sont compatibles avec cette fonctionnalité.
Les Media Queries sont des expressions dont la valeur est true (vrai) ou false (faux). Lorsqu'un Media Query a pour valeur true, les instructions situées entre les accolades qui le suivent sont exécutées. Elles sont ignorées dans le cas contraire. Si nécessaire, vous pouvez associer plusieurs expressions à l'aide d'opérateurs logiques :
| Opérateur | Signification |
|---|---|
| Source : Pearson | |
| and | et |
| only | uniquement : masque la suite sur les navigateurs non compatibles avec les Media Queries |
| not | non |
| , | ou |
Les Media Queries reposent sur la propriété CSS3 @media. Voici quelques-unes des syntaxes utilisables :
| Syntaxe | Signification |
|---|---|
| Source : Pearson | |
| @media (max-width: largeur) { } | Largeur de la fenêtre inférieure à la largeur spécifiée |
| @media (max-device-width: largeur) { } | Largeur du périphérique inférieure à la largeur spécifiée |
| @media (min-width: largeur1) and (max-width: largeur2) { } | Largeur de la fenêtre comprise entre les deux largeurs spécifiées |
| @media (max-device-width: largeur) and (orientation: landscape) { } | Largeur du périphérique inférieure à la largeur spécifiée, et écran tenu horizontalement |