Tutoriel CSS3 - sommaire

CSS : site 'responsive' avec les 'media queries'

Internet mobile

Dans un passé encore récent un site devait s'afficher seulement sur un écran d'ordinateur de bureau voire sur un écran de PC portable. Mais dans les deux cas la largeur de l'écran était supérieure à 900 pixels. Et donc le plus souvent la largeur de chaque page du site était réglée sur 900 pixels.
Mais l'internet mobile c'est à dire la visite de sites à partir de terminaux disposant de petits écrans (tablettes et smartphone) a connu un développement extraordinaire.
Comment concevoir un site qui s'adapte à la diversité des écrans ?

Trois solutions possibles

L'adaptabilité d'un site à tous types d'écrans est appelé le "responsive web design".

Il existe trois techniques pour cette adaptivité :
• une application pour mobiles
• deux URL différentes donc deux versions du site
• solution CSS avec les media queries

Dans ce chapitre je n'aborderai que la solution CSS : les media queries.

Un exemple

Imaginons un site dont chaque page comprend quatre grandes divisions :

• en-tête de page ( conteneur header)
• zone de navigation (conteneur nav)
• corps de la page (conteneur section)
• pied de page (conteneur footer)

Le corps de la page (conteneur SECTION) comprend beaucoup de texte répartis dans sixe petites boites (élément DIV affecté de la classe "boite").

Le rendu

Aperçu de la page dans un iframe :

Sur PC réduisez la largeur de la fenêtre : les boites vertes passent à trois de front puis à deux de front ; réduisez encore la fenêtre, les boites vertes sont les unes sous les autres.
Par contre les boites à fond bleu occupent toujours toute la largeur de la fenêtre.

Le code HTML

Dans la partie HEAD de la page une instruction meta. J'évoquerai son rôle plus loin.

Concernant le code de la partie BODY six éléments div class ='boite' ... dans le conteneur SECTION.

La feuille de style interne

Dans le conteneur STYLE de la partie HEAD.

/* pour tous les écrans  */
header, nav,footer {float : left ; width : 100% ; 
	background : skyblue ; margin-top : 10px;}
.boite {float : left ; background : lime; }
h1,h2 {text-align : center ; line-height : 40px; 
	font-size : 1.2em;  }
p {font-size : 1em ; padding : 5px ; }

/* écran dont largeur inférieure à 480     */
* {font-size :10px;}
section {width : 100%; }
.boite{width : 100%; margin-top : 5px;  }

 
 /* écrans qui font au minimum 480 de large */
@media (min-width: 480px) 
{
	section{width : 100%; }
	.boite {width: 100%;  }
	* {font-size : 12px ; }
 }
/* écrans qui font au minimum 800 de large  */
@media (min-width: 800px) 
{
	section {width : 760px ; margin : auto; }
	.boite {width : 47%; margin : 5px 1% 5px 1% ;  }
	* {font-size : 14px ; }
}
/* écrans qui font au minimum 1000 de large  */
@media (min-width: 1000px) 
{
	section {width : 900px; margin : auto;}
	.boite {width : 30%; margin : 5px 1% 5px 1%; }
	* {font-size : 16px ; }
}
/* écrans qui font au minimum 1200 de large  */
@media (min-width: 1200px) 
{
	section {width : 1100px; margin : auto;  }
	.boite {width : 22% ; margin : 5px 1% 5px 1%;  }
	* {font-size : 18px ; }
}
/* écrans qui font au minimum 1400 de large   */
@media (min-width: 1400px) 
{
	section {width : 1300px; margin : auto;  }
	.boite {width : 14% ; margin : 5px 1% 5px 1%;  }
	* {font-size : 20px ; }
}

Bien évidemment dans le cadre d'un site (avec de nombreuses pages) la feuille de style serait externe ; avec dans chaque page un lien (link ... ) vers cette feuille de style.

Étude très détaillée de cette feuille de style

Une feuille bien structurée

Il y a d'abord toutes les règles indépendantes du type de terminal.
Il y a ensuite les règles relatives aux écrans dont la largeur est inférieure à 480px.
Et enfin des tests par rapport à des "breakpoints" sont effectués sous forme de "media queries".

Largeur des grandes divisions

Les boites header, nav & footer ont toujours pour largeur celle de la fenêtre.
Par contre la largeur de l'élément section est fonction de la largeur du terminal.
Il en est de même pour la largeur des DIV affectés de la classe "boite" et de la taille de référence du texte.

Les "media queries" ou requêtes de média

Dans la feuille de style nous trouvons désormais des tests sous forme de requêtes de média ("media queries" en anglais).
Une requête de média commence par "@media" suivi entre parenthèses d'une condition.
Il y a ensuite entre accolades les règles de style qui s'appliquent si la condition est VRAI.

Comment lire les media queries de l'exemple ?

Il y a cinq tests !
A chaque fois on compare la largeur du terminal utilisé par rapport à une valeur en pixels.

Notez bien que les tests sont ici ordonnés par "break points" croissants.

C'est une bonne pratique aujourd’hui de créer son site en version mobile d’abord, puis d’utiliser les requêtes de média pour modifier la disposition du code pour les écrans d’ordinateurs ou de tablettes.
Aussi dans la suite des tests il faut comparer d'abord aux petites résolutions jusqu'aux grandes en passant pas les résolutions médiums.

Dans notre exemple :
• si un terminal a une largeur inférieure à 480px aucun test n'est VRAI. Alors SECTION et les éléments "boite" ont par défaut une largeur de 100% de l'écran et taille de base du texte = 10px
• si le terminal a une largeur au moins égale à 480 mais inférieure à 800, le premier test est VRAI mais pas les autres. Donc la taille de référence du texte est 12px ; SECTION = 100% de large ;largeur de "boite" = 100%, ...
• si le terminal a une largeur au moins égale à 800 mais inférieure à 1000, les deux premiers tests sont VRAI et les autres sont FAUX. Donc ce sont les règles de style contenues dans la deuxième condition qui s'appliquent ; Taille de référence du texte = 14px ; largeur de "boite" =47%.
• si le terminal a une largeur au moins égale à 1000 mais inférieure à 1200, les trois premiers tests sont VRAI et le dernièr est faux. Donc ce sont les règles de style contenues dans la troisième condition qui s'appliquent ; largeur "boite" = 30%, ...
• si le terminal a une largeur au moins égale à 1200 mais inférieure à 1400, les quatre premiers tests sont VRAI. Donc ce sont les règles de style contenues dans la quatrième condition qui s'appliquent ; largeur de "boite" = 22%, ...
• et enfin si le terminal a une largeur au moins égale 1400, les cinq tests sont VRAI c'est donc les règles de la cinquième condition qui s'applique ; largeur de "boite" = 14%, taille de référence = 20px, largeur de SECTION = 1300px avec centrage

La balise META dans la partie HEAD

Vous avez sans doute remarqué que désormais il y a dans la partie HEAD de chaque page une instruction HTML étrange :

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

Cette instruction est fondamentale dans le cadre du Web mobile !

Rôle de cette instruction

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 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).

Pour éviter ce dézoomage l'attribut content de la balise meta name ="viewport" doit avoir deux valeurs :
• width = device-width : empêche ce "dézoomage" automatique par le navigateur ; vous demandez en effet que la largeur du viewport soit identique à la largeur utile de l'écran du terminal
• user-scalable=yes : possibilité pour le visiteur de zoomer (en avant ou en arrière)

Prenons un exemple concret. Votre iphone 6 a les dimensions utiles d'écran de 377 par 667 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" content= "width=device-width, user-scalable=yes" la largeur effective ne sera plus que 377 pixels ou (667 selon l'orientation).

Autre exemple : le Samsung Galaxy A12 le "device-width" est 360 ou 800 pixels (selon l'orientation).

Masquer certains éléments

Pour certaines résolutions on peut imaginer que certains éléments ou boites affectées d'une certaine classe soient masqués.
Exemple : @media (max-width : 600px ) { aside {display : none;} .grandecran {display : none; } }

Sens de cette condition CSS : si la largeur du terminal est inférieure à 601 (écran de smartphone) les éléments ASIDE et les boites affectées de la classe "grandecran" sont masqués !

Responsive design et les images

Pour que les images ne soient jamais rognées sur un petit écran tel celui d'un smartphone il ne faut pas exprimer leur largeur en pixels mais en pourcentage ou en vw : une nouvelle unité de mesure (voir chapitre précédent).

Le code de la page

Le CSS :

	body {width : 90vw ; margin : 20px auto; border : 1px solid navy ;  }
	section {width : 70vw; background : skyblue ; margin : 10px auto;  }
	img.centre {display : block ; width : 50% ; margin : 10px auto; }
	img.gauche {display : inline-block ; width : 28%; margin :1% ; vertical-align : top ; }
	img.miniature {float : left ; width : 10%; margin : 5px 1% ; 

Notez l'emploi de l'unité de mesure vw pour exprimer les largeurs des éléments BODY & SECTION.
Par contre dans les différentes classes spécifiques aux éléments IMG, la largeur est exprimée en % donc de façon relative.

Le code HTML de la partie BODY : ... <body> <section> <img src ="../images/bikini21.jpg" class ="centre" /> <p><img src ="../images/bikini22.jpg" class ="gauche" /> <img src ="../images/bikini23.jpg" class ="gauche" /> <img src ="../images/bikini24.jpg" class ="gauche" /> <p><img src ="../images/bikini25.jpg" class ="miniature" > Blablabla ... <br>Blablabla ... ... <br>Blablabla ... </section> </body> ...

Le rendu :