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.

Trois solutions possibles

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

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 au travers d'un exemple.

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 de la partie body (extrait)

Il y a en fait six DIV avec la classe "boite". <body> <header> <h1>Titre général de la page</h1> </header> <nav> <h2>Zone de navigation</h2> </nav> <section> <div class ="boite"> <h2>Titre de l'article</h2> <p>Contenu du texte ... <br>... <br>...</p> </div> <div class ="boite"> <h2>Titre de l'article</h2> <p>Contenu du texte ... <br>... <br>...</p> </div> ... </section> <footer> <h2>Pied de page</h2> </footer>

Aucune difficulté.
Notez que les boites "div class = "boite" sont enfants de SECTION.

Le code de la partie HEAD

...
<meta name="viewport" content=	"width=device-width, user-scalable=yes" />
<style>
/* 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 ; }
}
</style>
...

La feuille de style interne

Bien évidemment dans le cadre d'un site (avec de nombreuses pages) la feuille de style serait externe.

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.

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

Media queries et flexbox

Vous avez noté que j'ai positionné les six petites boites à fond vert avec l'outil "float"
Or CSS3 propose des technologies de positionnement beaucoup plus sophistiquées. L'outil "float" doit être réservé au positionnement d'éléments "inline" dans une boite (lettrine, image, etc.).

Reprenons le thème mais en utilisant maintenant l'outil flexbox (boites flexibles ) pour positionner les petites boites vertes.

Le code HTML

Aucun changement ! Et c'est logique le code HTML doit être indépendant du style.

La feuille de style

Elle est beaucoup plus courte. ... /* pour tous les écrans */ header, nav,footer {float : left ; width : 100% ; background : skyblue ; margin-top : 10px;} section {display : flex; flex-direction : row ; flex-wrap : wrap; justify-content : space-around; } .boite { background : lime ; width : 200px ; margin-top : 5px; } 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%; } /* très petit écran */ @media (min-width: 480px) { section{width : 100%; } * {font-size : 12px; } } /* petit écran */ @media (min-width: 800px) { section {width : 760px ; margin : auto; } * {font-size : 14px ; } } /* écran médium */ @media (min-width: 1000px) { section {width : 900px; margin : auto;} * {font-size : 16px ; } } /* grand écran */ @media (min-width: 1200px) { section {width : 1100px; margin : auto; } * {font-size : 18px ; } } /* très grand écran */ @media (min-width: 1400px) { section {width : 1300px; margin : auto; } * {font-size : 20px ; } } ...

Dans les requêtes de média on ne gère plus la classe "boite".
Par contre pour tous les écrans nous avons deux règles de style : section {display : flex; flex-direction : row ; flex-wrap : wrap; justify-content : space-around; } .boite { background : lime ; width : 200px ; margin-top : 5px; }

l'élément SECTION est le "flex-container" et ses "enfants" sont des "flex-items".
De plus il y a gestion des sauts de ligne et d'une répartition toujours harmonieuses des items au sein de leur conteneur.

Le rendu :

Le rendu est plus joli qu'avec "float" ; les boites sont comme "justifiées" dans leur conteneur.
Le positionnement de boites avec l'outil 'display flex' est évoqué dans ce tutoriel. Voir sommaire du tuto.

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 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 !

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

content

meta name ="viewport"

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 (donc par rapport à la largeur du parent).

Exemple

...
	<meta name="viewport" content=	"width=device-width, user-scalable=yes" />
<style>
		section {width : 100%; background : skyblue ;  }
		@media (min-width : 1000px) {section {width : 800px ; margin : auto; }}
		img.centre {display : block ; width : 60% ; margin : 10px auto; }
		img.gauche {display : inline-block ;width : 30%; margin :1% ; vertical-align : top ; }
		img.miniature {float : left ; ;width : 10%; margin-right :1% ; }
</style></head>
<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 ...
		<br>Blablabla ...
		<br>Blablabla ...
		<br>Blablabla ...
		<br>Blablabla ...
		<br>Blablabla ...
</section>

Ainsi la largeur de chaque image va s'adapter à celle du conteneur parent (SECTION) qui lui même a une largeur fonction de l'écran (800 pixels si grand écran ou 100% de la largeur de la fenêtre si un petit écran.