CSS : les media queries - Responsive Web Design

Un site qui s'affiche correctement sur un écran d'ordinateur ou sur une tablette voire un smartphone. Une vue de l'esprit ???
Non pas du tout ! C'est désormais possible à condition d'utiliser dans la feuille de style les media queries (requêtes de média) c'est à dire de produire une feuille de style avec des tests ! On parle de responsive web design (site web adaptatif).

Prenons un exemple. Imaginons un site dont chaque page comprend quatre grandes divisions :

Le corps de la page comprend beaucoup de texte répartis dans quatre petites boîtes (conteneur article).

Aspect attendu de la page sur un grand écran (largeur supérieure à 900 pixels)

Les boîtes "article" sont toutes de front.

Aspect attendu de la page sur une tablette en mode portrait

Les boîtes "article" sont deux de front.

Aspect attendu de la page sur un smartphone

Les boîtes "article" apparaissent les unes en dessous des autres et elles sont "repliées".
Il faut survoler une boîte pour la déplier. Les images sont masquées !

Le code HTML : structure

... <meta name="viewport" content= "width=device-width, user-scalable=yes" /> </head> <body> <header>.. </header> <nav>... </nav> <section> ... <article>... </article> <article> ... </article> <article> ... <article> <article>... </article> </section> <footer> ...</footer> </body> </html>

La structure de la page est très simple.
Le conteneur BODY contient les divisions HEADER, NAV, SECTION et FOOTER
La boîte SECTION inclut 4 fois la boîte ARTICLE.

Notez cependant dans la partie HEAD une instruction basée sur la balise : meta name = "viewport ... . J'aurai l'occasion de revenir sur cette instruction HTML fondamentale mais un peu compliquée à expliquer ...

La feuille de style avec les media queries (extraits)

@media screen { /* pour tous les écrans */ *{margin: 0px ; padding : 0px ; text-decoration : none ; border : none ; } body {margin-left : auto ; margin-right : auto ; } header, nav, section, footer {width : 100%; border : 1px solid black ; background : lime ; height : auto ; } article {display : inline-block ; background-color : white ; overflow : auto ; } img {display :block ; width : 80%; margin : auto; } ... } /* fin alors */ @media screen and (min-width: 900px) { /* fenêtre d'affichage dont la largeur est au moins égale à 900 pixels */ * {font-size : 14px ;} body {width : 900px ;} header, nav, section, footer {margin-top : 20px ; } article {width : 22% ; margin : 1% ; height : 250px ; } } /* fin alors */ @media screen and (max-width: 900px) and (min-width : 480px ) { /* fenêtre d'affichage dont la largeur est comprise entre 481 et 900 */ * {font-size : 12px ; } body {width : 100% ;} header, nav, section, footer {margin-top : 10px ; } article {width : 44% ; margin : 2% ; height : 150px ; } } /* fin alors */ @media screen and (max-width: 479px) { /* fenêtre d'affichage dont la largeur est inférieure ou égale à 480 */ * {font-size : 10px ; } body {width : 100% ;} header, nav, section, footer {margin-top : 5px ; } article {width : 94% ; margin : 2% ; height : 50px ; } article:hover {height : auto ; } img {display : none ; } } /* fin alors */

Commentaire de cette feuille de style

Grâce aux commentaires le code CSS est assez facile à comprendre.
Les media queries structurent cette feuille de style externe en quatre parties ; chaque partie comprenant des règles de style.

Attention ne confondez pas width (largeur de la fenêtre d'affichage) avec device-width (largeur de l'écran du terminal).

Dans la partie commune à tous les écrans la boîte article est redéfinie en inline-block.

Tests

Visualisez la page en lien sur un grand écran puis sur un écran de tablette et enfin sur un écran de smartphone.


Testez la page

Si vous utilisez une tablette orientez celle-ci.
Tantôt vous aurez 4 images de front (orientation paysage) et tantôt 2 images de front (orientation portrait).

Plusieurs feuilles de style

Plutôt qu'une seule feuille de style externe on peut utiliser HTML pour diriger en fonction de la largeur de l'écran vers un des différents fichiers CSS.

<link rel ="stylesheet" href ="style_commun.css" media ="screen" /> <link rel ="stylesheet" href ="style_petit.css" media ="screen" and (max-width:479px) /> <link rel ="stylesheet" href ="style_moyen.css" media ="screen" and (max-width: 900px) and (min-width : 480px ) /> <link rel ="stylesheet" href ="style_grand.css" media ="screen" and (min-width : 900px ) />

Donc au lieu d'une feuille de style externe il y a 4 fichiers CSS.
Le code HTLM charge toujours la feuille "style_commun.css" et l'un des trois autres fichiers en fonction de la largeur de l'écran.

La balise meta dans la partie head

Vous avez sans doute remarqué que la partie HEAD de la page il y a une instruction HTML très étrange :

<meta name="viewport" content = "width=device-width, user-scalable=yes" />

A quoi sert cette instruction ?
Cette instruction est fondamentale dans le cadre du web mobile !

Les écrans des mobiles sont beaucoup plus étroits que les écrans de PC (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles affichent le site en « dézoomant », ce qui permet d'avoir un aperçu de l'ensemble de la page mais alors c'est c'est tellement écrit petit que c'est illisible ...

Cette zone d'affichage simulée est appelée le viewport.

Attention la valeur du viewport ne dépend pas du terminal mais du navigateur mobile installé sur ce terminal.
Ainsi le viewport est compris entre 800 pixels (Android 3) et 980 (Android 4 et Safari).

Prenons un exemple simple. Votre iphone5 a une largeur utile d'écran de 320 par 568 pixels ; le viewport possible est de 980 pixels grâce au navigateur safari mobile qui est installé.
Mais grâce à l'instruction meta name ="viewport" ... la largeur effective sera de 320 ou (568 selon l'orientation).

Dans un futur proche la gestion du viewport pourra être effectuée non pas via le HTML mais directement dans la feuille de style (donc en CSS). Déjà certains navigateurs ont implémenté ce nouveau sélecteur CSS.

Les images

Pour que les images ne soient jamais rognées sur un petit écran tel celui d'un smartphone il ne faut pas que leur largeur soit exprimée en pixels mais en pourcentage (donc par rapport à la largeur du conteneur).

Exemple

<style> body {width : 90% ; margin : auto ; } img.grand {display : block ;width : 80% ; margin : auto ; } img.petit {display : inline-block ;width : 40%; margin :1% ; } ... <body> <p>Une grande image centrée dans son container : <img src ="..." class ="grand" /> ... <p>Deux petites images de front : <img src ="..." class ="petit" /> <img src ="..." class ="petit" /> ...

Ainsi la largeur de chaque image va s'adapter à celle de l'écran. Ici l'adaption sera indirecte. Les images auront pour largeur 40% ou 80% de celle de BODY et la largeur de BODY sera égale à 90% de celle de l'écran.
Donc largeur d'une image = 36% ou 72% de celle de l'écran !

Les images vectorielles et le responsive web design

Pour que les images vectorielles (format SVG) produites avec un éditeur de textes ou avec Inkscape (ou les deux) ne soient jamais rognées il suffit de modifier certains attributs de la balise SVG.

Imaginons qu'avec Inkscape vous ayez créé un document de 600 par 400 pixels.
Dans le code de la balise SVG on retrouve entre autres : ...width ="600" height="400"

Avant d'insérer cette image dans une page web il faut le modifier comme suit le code du fichier SVG :

<svg ... width ="100%" height="auto" viewBox ="0 0 600 400" >

la taille de l'image SVG s'adapte ainsi à la largeur de l'écran. Mais pour que les formes contenues dans l'image vectorielle puissent être dessinées il faut impérativement un système de coordonnées ; il faut donc rajouter un viewBox !

Les zones de dessin Canvas et le responsive web design

L'API Canvas vous permet de produire un dessin (statique ou animé) dans une page web. Sachez que l'équivalent du viewBox existe dans CANVAS mais avec un codage est un peu différent.
Il suffit de définir une taille "officielle" du canevas avec les attributs width / height de la balise CANVAS puis de définir les dimensions d'affichage du canevas via une règle de style (propriétés CSS width / height).
Exemple :

<canvas width ="600" height ="400" style ="width :80% ; height : auto ;"></canvas>

La zone de dessin CANVAS va s'afficher conformément au CSS (largeur du canevas = 80%) mais pour le script la zone de dessin fait 600px par 400px. Ainsi si dans le script vous avez les instructions suivantes :

	var X = canvas.width; var Y = canvas.height;

Les variables X et Y vont respectivement contenir 600 et 400.
Pour dessiner les formes dans la zone de dessin vous pouvez paramétrer avec X et Y.
Exemple :

	contexte.beginPath();
	contexte.moveTo(0,Y/2) ; 
	contexte.quadraticCurveTo(X/2,Y-50,X,Y/2); 
	contexte1.stroke(); 

Ci-dessus une courbe quadratique est dessinée dans la zone CANVAS.

Il y a dans mon site un tutoriel sur l'API Canvas.
Tuto Canvas
Retour menu