Mise en pratique des media queries sur le design
Bon, changer la couleur du texte, c'est bien joli mais cela n'apporte pas grand-chose. Par contre, cela devient de suite plus intéressant quand on se sert des media queries pour modifier l'apparence de son site en fonction de la résolution. Vous allez voir qu'on peut faire tout ce qu'on veut !
Pour cet exemple, je vous propose de reprendre le design que nous avons créé pour le site web de Zozor (figure suivante).
Le site web réalisé lors du TP
Le site est bien adapté à la plupart des résolutions d'écran mais, quand l'écran est plus petit que 1024 px, il devient nécessaire de « scroller » vers la droite pour voir toute la page. Le site n'est donc pas très pratique à consulter sur un petit écran.
Je vous propose d'utiliser les media queries pour changer l'apparence du site sur les résolutions inférieures à 1024 px de largeur. Nous allons opérer les modifications suivantes :
On pourrait bien entendu faire beaucoup d'autres modifications : changer la couleur, la disposition du pied de page, etc. Mais cela sera déjà bien suffisant pour nous entraîner avec les media queries.
Nous allons travailler directement à l'intérieur du fichier style.css que nous avons réalisé lors du TP. Nous y ajouterons quelques instructions media queries pour adapter le design. Je vous invite à télécharger les fichiers du TP si vous ne les avez pas déjà.
Pour le moment, la largeur de la page est fixée à 900 px et le contenu est centré :
#bloc_page { width: 900px; margin: auto; } |
À la suite de ces lignes, je vous propose d'ajouter la règle media query suivante :
@media all and (max-width: 1024px) { #bloc_page { width: auto; } } |
La règle signifie : « Pour tous les types d'écrans, si la largeur de la fenêtre ne dépasse pas 1024 px, alors exécuter les règles CSS suivantes ».
Les règles CSS en question sont très simples, il n'y en a en fait qu'une seule : on donne une largeur automatique à la page (plutôt qu'une largeur fixe de 900 px). La page prendra alors tout l'espace disponible dans la fenêtre. Cela évite l'apparition de barres de défilement horizontales sur les petites résolutions.
auto est la valeur par défaut de la propriété width. Par défaut, les blocs ont une largeur automatique (ils prennent toute la place disponible). Cette valeur « écrase » celle que nous avions forcée à 900px quelques lignes plus haut : nous revenons donc au comportement par défaut du bloc.
Nous voulons que le menu de navigation prenne moins de place sur les petites résolutions. Plutôt que de lui donner une dimension fixe, nous allons lui redonner sa dimension automatique flexible d'origine. Chaque élément du menu s'écrira en dessous du précédent : pour cela, nous transformerons les puces en block plutôt qu'en inline-block.
Enfin, le texte sera écrit plus petit et nous retirons la bordure en bas des liens lors du survol, car elle est moins adaptée à cette disposition.
@media all and (max-width: 1024px) { nav { width: auto; text-align: left; }
nav li { display: block; padding-left: 4px; }
nav a { font-size: 1.1em; }
nav a:hover { border-bottom: 0; } } |
Pour retirer la bannière, rien de plus simple : nous utilisons la propriété display à laquelle nous affectons la valeur none. Si la fenêtre est trop petite, nous préférons masquer complètement la bannière :
@media all and (max-width: 1024px) { #banniere_image { display: none; } } |
Plutôt que de placer ce bloc à droite de l'article, nous allons le faire passer en-dessous. Ce type de disposition « de haut en bas » est plus adapté aux petits écrans.
À l'intérieur du bloc, nous réajustons un peu la position des éléments : la photo de Zozor, notamment, sera placée en flottant à droite.
@media all and (max-width: 1024px) { article, aside { width: auto; display: block; margin-bottom: 15px; }
#fleche_bulle { display: none; }
#photo_zozor img { width: 110px; float: right; margin-left: 15px; }
aside p:last-child { text-align: center; } } |
Que signifie aside p:last-child ?
C'est un sélecteur avancé que nous n'avons pas utilisé jusqu'ici. aside p signifie « Tous les paragraphes à l'intérieur de la balise <aside> ». Avec :last-child, on cible uniquement le dernier paragraphe dans le bloc aside (celui qui contient les liens vers Facebook et Twitter), pour pouvoir centrer les images. Bien entendu, on aurait aussi pu affecter une class ou un id à ce paragraphe pour le cibler directement, mais je n'ai pas voulu modifier le code HTML.
La page est désormais complètement réorganisée lorsque la fenêtre fait 1024 px ou moins de largeur. Regardez par vous-mêmes le résultat, la figure suivante parle d'elle-même !
Le même site, présenté différemment en fonction de la largeur de l'écran
Créé avec HelpNDoc Personal Edition: Générateur d'aides CHM gratuit