Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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

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 :

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


Observez le rendu

Affichez la page sur un grand écran (PC de bureau ou PC portable).
Observez que les six boites vertes sont côte à côte.
Progressivement réduisez la largeur de la fenêtre : les boites à fond vert 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 l'écran.

Le code de la partie body (extrait)

Il y a en fait six DIV avec la classe "boite".

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

Le code de la partie HEAD

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.

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.

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 :

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.

Observez le rendu de ce code

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.

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

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 :

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 (de la largeur du parent).

Exemple

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 d'un petit écran.
Testez ce code

Si vous utilisez un PC pensez à réduire progressivement la largeur de la fenêtre.