Mise en place des media queries
Les media queries font partie des nouveautés de CSS3. Il ne s'agit pas de nouvelles propriétés mais de règles que l'on peut appliquer dans certaines conditions.
Concrètement, vous allez pouvoir dire « Si la résolution de l'écran du visiteur est inférieure à tant, alors applique les propriétés CSS suivantes ».
Cela vous permet de changer l'apparence du site dans certaines conditions : vous pourrez augmenter la taille du texte, changer la couleur de fond, positionner différemment votre menu dans certaines résolutions, etc.
Contrairement à ce qu'on pourrait penser, les media queries ne concernent pas que les résolutions d'écran.
Vous pouvez changer l'apparence de votre site en fonction d'autres critères comme le type d'écran (smartphone, télévision, projecteur…), le nombre de couleurs, l'orientation de l'écran (portrait ou paysage), etc. Les possibilités sont très nombreuses !
Appliquer une media query
Les media queries sont donc des règles qui indiquent quand on doit appliquer des propriétés CSS.
Il y a deux façons de les utiliser:
- en chargeant une feuille de style .css différente en fonction de la règle (ex : « Si la résolution est inférieure à 1280px de large, charge le fichier petite_resolution.css»);
- en écrivant la règle directement dans le fichier .css habituel (ex : « Si la résolution est inférieure à 1280px de large, charge les propriétés CSS ci-dessous »).
Chargement d'une feuille de style différente
Vous vous souvenez de la balise <link/> qui permet, dans notre code HTML, de charger un fichier .css?
1 <link rel="stylesheet" href="style.css" />
On peut lui ajouter un attribut media, dans lequel on va écrire la règle qui doit s'appliquer pour que le fichier soit chargé. On dit qu'on fait une « requête de media » (media query en anglais).
Voici un exemple :
1 <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" />
Au final, votre code HTML pourrait proposer plusieurs fichiers CSS : un par défaut (qui est chargé dans tous les cas) et un ou deux autres qui seront chargés en supplément uniquement si la règle correspondante s'applique.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="style.css" /> <!-- Pour tout le monde -->
6 <link rel="stylesheet" media="screen and (max-width: 1280px)" href="petite_resolution.css" /> <!-- Pour ceux
qui ont une résolution inférieure à 1280px -->
7 <title>Media queries</title>
8 </head>
Chargement des règles directement dans la feuille de style
Une autre technique consiste à écrire ces règles dans le même fichier CSS que d'habitude.
Dans ce cas, on écrit la règle dans le fichier .css comme ceci:
1 @media screen and (max-width: 1280px)
2 {
3 /* Rédigez vos propriétés CSS ici */
4 }
Les règles disponibles
Il existe de nombreuses règles permettant de construire des media queries.
Je vous présente ici les principales:
- color: gestion de la couleur (en bits/pixel).
- height: hauteur de la zone d'affichage (fenêtre).
- width: largeur de la zone d'affichage (fenêtre).
- device-height: hauteur du périphérique.
- device-width: largeur du périphérique.
- orientation: orientation du périphérique (portrait ou paysage).
- media: type d'écran de sortie. Quelques-unes des valeurs possibles:
- screen: écran « classique »;
- handheld: périphérique mobile;
- print: impression;
- tv: télévision;
- projection: projecteur;
- all: tous les types d'écran.
À savoir qu'on peut rajouter le préfixe min- ou max- devant la plupart de ces règles. Ainsi, min-width signifie « Largeur minimale », max-height « Hauteur maximale », etc...
La différence entre width et device-width se perçoit surtout sur les navigateurs mobiles des smartphones, nous en reparlerons plus loin.
Les règles peuvent être combinées à l'aide des mots suivants :
- only: « uniquement »;
- and: « et »;
- not: « non ».
Voici quelques exemples de media queries pour vous aider à bien comprendre le principe.
1 /* Sur les écrans, quand la largeur de la fenêtre fait au maximum 1280px */
2 @media screen and (max-width: 1280px)
3
4 /* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 1024px et 1280px */
5 @media all and (min-width: 1024px) and (max-width: 1280px)
6
7 /* Sur les téléviseurs */
8 @media tv
9
10 /* Sur tous types d'écrans orientés verticalement */
11 @media all and (orientation: portrait)
Tester les media queries
Les media queries sont surtout utilisées pour adapter le design du site aux différentes largeurs d'écran.
Faisons un test tout simple : nous allons changer la couleur et la taille du texte si la fenêtre fait plus ou moins de 1024 pixels de large.
Pour ce test, je vais utiliser la seconde méthode qui consiste à écrire la règle directement dans le même fichier .css que d'habitude:
1 /* Paragraphes en bleu par défaut */
2 p
3 {
4 color: blue;
5 }
6
7 /* Nouvelles règles si la fenêtre fait au plus 1024px de large */
8 @media screen and (max-width: 1024px)
9 {
10 p
11 {
12 color: red;
13 background-color: black;
14 font-size: 1.2em;
15 }
16 }
Dans notre feuille CSS, nous avons d'abord demandé à ce que le texte des paragraphes soit écrit en bleu, jusque là rien de nouveau. En revanche, nous avons ajouté une media query qui s'applique à tous les écrans dont la largeur ne dépasse pas 1024px. À l'intérieur, nous avons appliqué des règles CSS sur les paragraphes pour les écrire plus gros et en rouge.
Résultat : la page n'a pas la même apparence selon la taille de la fenêtre.
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, on va reprendre le design que nous avons créé pour le site web de Zozor.
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.
On va 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:
- le menu de navigation en haut à droite sera disposé en hauteur plutôt qu'en largeur, et les liens seront écrits en plus petit;
- la bannière avec le pont de San Francisco (le Golden Gate) sera supprimée, car elle prend beaucoup de place et n'apporte pas beaucoup d'informations;
- le bloc <aside> « À propos de l'auteur » sera placé sous l'article (et non pas à côté), et son contenu sera réorganisé (la photo de Zozor sera positionnée en flottant).
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.
La page
Pour le moment, la largeur de la page est fixée à 900 px et le contenu est centré:
1 #bloc_page
2 {
3 width: 900px;
4 margin: auto;
5 }
À la suite de ces lignes, je vous propose d'ajouter la règle media query suivante:
1 @media all and (max-width: 1024px)
2 {
3 #bloc_page
4 {
5 width: auto;
6 }
7 }
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.
Le menu de navigation
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 demandons à ce que les éléments de la Flexbox soient organisés en colonne.
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.
1 @media all and (max-width: 1024px)
2 {
3 nav
4 {
5 width: auto;
6 text-align: left;
7 }
8
9 nav ul
10 {
11 flex-direction: column;
12 }
13
14 nav li
15 {
16 padding-left: 4px;
17 }
18
19 nav a
20 {
21 font-size: 1.1em;
22 }
23
24 nav a:hover
25 {
26 border-bottom: 0;
27 }
28 }
La bannière
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:
1 @media all and (max-width: 1024px)
2 {
3 #banniere_image
4 {
5 display: none;
6 }
7 }
Le bloc « À propos de l'auteur »
Plutôt que de placer ce bloc à droite de l'article, nous allons le faire passer en-dessous grâce à des Flexbox en colonne. 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.
1 @media all and (max-width: 1024px)
2 {
3 section
4 {
5 flex-direction: column;
6 }
7
8 article, aside
9 {
10 width: auto;
11 margin-bottom: 15px;
12 }
13
14 #fleche_bulle
15 {
16 display: none;
17 }
18
19 #photo_zozor img
20 {
21 width: 110px;
22 float: right;
23 margin-left: 15px;
24 }
25
26 aside p:last-child
27 {
28 text-align: center;
29 }
30 }
aside p:last-child 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.
Le résultat
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 !
Media queries et navigateurs mobiles
Comme vous le savez sûrement, les écrans des smartphones sont beaucoup moins larges que nos écrans habituels (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. La zone d'affichage simulée est appelée le viewport: c'est la largeur de la fenêtre du navigateur sur le mobile.
En CSS, avec les media queries, si vous ciblez l'écran avec max-width sur un mobile, celui-ci va comparer la largeur que vous indiquez avec celle de son viewport. Le problème, c'est que le viewport change selon le navigateur mobile utilisé.
On voit qu'un iPhone se comporte comme si la fenêtre faisait 980 px de large, tandis qu'un Android se comporte comme si la fenêtre faisait 800 px.
Pour cibler les smartphones, plutôt que d'utiliser max-width, il peut être intéressant de recourir à max-device-width: c'est la largeur du périphérique.
Les périphériques mobiles ne dépassant pas 480 px de large, on pourra viser uniquement les navigateurs mobiles avec cette media query:
1 @media all and (max-device-width: 480px)
2 {
3 /* Vos règles CSS pour les mobiles ici */
4 {
En théorie, on peut cibler les écrans mobiles avec le media handheld. Malheureusement, aucun navigateur mobile à part Opera mobile ne reconnaît handheld. Ils se comportent tous comme s'ils étaient des écrans normaux (screen). On ne peut donc pas vraiment utiliser handheld pour viser les mobiles.
Vous pouvez modifier la largeur viewport du navigateur mobile avec une balise meta à insérer dans l'en-tête (<head>) du document:
1 <meta name="viewport" content="width=320" />
Vous pouvez utiliser cette balise pour modifier la façon dont le contenu de votre page s'organise sur les mobiles.
Pour obtenir un rendu facile à lire, sans zoom, vous pouvez demander à ce que le viewport soit le même que la largeur de l'écran:
1 <meta name="viewport" content="width=device-width" />