Les objectifs

Actuellement, les concepteurs de sites se doivent de produire des sites web qui soient parfaitement visibles et lisibles, quel que soit le support de consultation : écran d’ordinateur, de tablette ou de smartphone. Créer des sites qui s’adaptent automatiquement selon le support s’appelle le Responsive Web Design ou plus couramment abrégé, même en français, en responsive. Les Media Queries, ou requêtes de média en français, permettent de créer une mise en forme et une mise en page spécifiques selon l’écran de diffusion. C’est la technique CSS qui est utilisée pour créer des sites web responsives, en association avec des grilles ou des boîtes flexibles.

Les requêtes de média

1. Les critères

Les requêtes de média permettent de cibler précisément les différents types d’écran de diffusion, selon des critères bien précis.

Voici les critères utilisables dans les requêtes de média :

La largeur d’affichage : width. Il est possible de tester la largeur de la zone d’affichage du navigateur. Exemple : width: 780px.
La hauteur d’affichage : height. Il est possible de tester la hauteur de la zone d’affichage du navigateur.
La largeur physique : device-width. Il est possible de tester la largeur physique de l’écran de diffusion.
La hauteur physique : device-height. Il est possible de tester la hauteur physique de l’écran de diffusion.
L’orientation de l’écran : orientation. Exemples : orientation: portrait ou orientation: landscape. Très pratique pour tester si l’utilisateur utilise son appareil verticalement (portrait) ou horizontalement (landscape).

Voici d’autres critères un peu moins courants :

Le ratio : aspect-ratio. Pour tester la valeur du ratio largeur/hauteur. Exemple : aspect-ratio: 16/9
Le ratio physique : device-aspect-ratio. Pour tester la valeur du ratio physique largeur/hauteur de l’écran.
La couleur : color. Il est possible de tester si le support de diffusion utilise de la couleur, qui est la valeur par défaut...

La taille des écrans

Les écrans des tablettes et des smartphones ont des résolutions très différentes selon les constructeurs. Pour déterminer les résolutions des écrans, dans l’élément <head>, il faut utiliser l’élément <meta> avec l’attribut viewport. Pour l’attribut content, c’est la valeur device-width qui cible la largeur physique de l’écran.

Voici un exemple utilisant cette syntaxe :

<meta name="viewport" content="width=device-width" />

L’affichage sera ainsi adapté à chaque surface d’affichage de rendu de chaque navigateur pour appareil mobile.

Un exemple de mise en page responsive

1. Le site initial

Voici le site qui sera réalisé. Dans un premier temps, il ne sera pas responsive. Voici le code de la page HTML :

<!DOCTYPE HTML>  
<html lang="fr">  
<head>  
  <title>Ma page d'accueil</title>  
  <meta charset="UTF-8" />  
  <link rel="stylesheet" href="styles.css" />  
</head>  
<body>  
<div id="conteneur">  
    <header id="haut">  
      <h1>Mon site web</h1>  
      <h2>Le slogan de mon site Web</h2>  
    </header>  
    <nav id="navigation">  
      <p><a href="#">Lien 1</a> | <a href="#">Lien 2</a> | 
<a href="#">Lien 3</a> | <a href="#">Lien 4</a> | <a href="#">Lien 5</a> | 
<a href="#">Lien 6</a></p>  
  </nav>  
  <section id="contenu">  
    <article>  
     <h1>Mon premier article</h1>  
     <p>Donec ullamcorper...</p>  
      <p>Nullam quis risus...</p>  
    </article>  
    <article>  
      <h1>Mon deuxième article</h1>  
      <p>Cras justo odio...</p>  
      <p>Donec id elit non...</p>  
    </article>  
    <article>  ...