HTML Responsive Web Design
Introduction
La conception Web réactive consiste à créer des pages Web qui s'affichent bien sur tous les appareils !
Une conception Web réactive s’adaptera automatiquement aux différentes tailles d’écran et fenêtres
d’affichage.
I. Définition :
Qu’est-ce que la conception Web réactive ?
Le Responsive Web Design consiste à utiliser HTML et CSS pour redimensionner, masquer, réduire ou
agrandir automatiquement un site Web, afin de le rendre beau sur tous les appareils (ordinateurs de
bureau, tablettes et téléphones) :
Code à tester
II. Mise en place
1. Définition de la fenêtre d’affichage (viewport)
La fenêtre d'affichage est la zone visible par l'utilisateur d'une page Web.
La fenêtre d'affichage varie selon l'appareil et sera plus petite sur un téléphone mobile que sur un
écran d'ordinateur.
Pour créer un site Web réactif, ajoutez la balise <meta> suivante à toutes vos pages Web :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Cela donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à
l'échelle de la page.
La partie width=device-width définit la largeur de la page pour qu'elle suive la largeur de l'écran
de l'appareil (qui varie en fonction de l'appareil).
La partie initial-scale=1.0 définit le niveau de zoom initial lorsque la page est chargée pour la
première fois par le navigateur.
Voici un exemple de page Web sans la balise méta viewport et de la même page Web avec la balise
méta viewport :
Figure 1 Sans la meta Viewport Figure 2 Avec la meta Viewport
2. Images réactives
Les images réactives sont des images qui s'adaptent parfaitement à n'importe quelle taille de
navigateur.
a. Utilisation de la propriété width
Si la propriété CSS width est définie sur 100 %, l'image sera réactive et agrandie et réduite
Exemple
img { width : 100% ;}
b. Utilisation de la propriété max-width
Si la propriété max-width est définie sur 100 %, l'image sera réduite si nécessaire, mais ne sera jamais
agrandie pour être plus grande que sa taille d'origine :
Exemple :
img {
max-width: 100%;
height: auto;
3. Taille du texte réactif
La taille du texte peut être définie avec une unité "vw", ce qui signifie la "largeur de la fenêtre".
De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur :
Exemple : <h1 style="font-size:10vw">Hello World</h1>
Viewport est la taille de la fenêtre du navigateur. 1vw = 1 % de la largeur de la fenêtre.
Si la fenêtre mesure 50 cm de large, 1vw vaut 0,5 cm.
4. Media Queries
Avec les Media Queries, ON PEUT définir des styles complètement différents pour différentes tailles de
navigateur.
Exemple :
Si la fenêtre du navigateur mesure 600 px ou moins, la couleur d'arrière-plan sera bleu clair :
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
Exemples génériques
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
