HTML Conception Web réactive
Le Responsive Web Design (RWD) 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.
Qu'est-ce que le Responsive Web Design ?
Le Responsive Web Design consiste à utiliser HTML et CSS pour redimensionner, masquer, réduire ou agrandir automatiquement un site Web, afin de lui donner une belle apparence sur tous les appareils (ordinateurs de bureau, tablettes et téléphones) :
Définition de la fenêtre
Pour créer un site Web réactif, ajoutez la balise <meta> suivante à toutes vos pages Web :
Cela définira la fenêtre d'affichage de votre page, qui donnera au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page.
Voici un exemple d'une page Web sans la balise méta viewport, et de la même page Web avec la balise méta viewport :
Astuce : Si vous parcourez cette page sur un téléphone ou une tablette, vous pouvez cliquer sur les deux liens ci-dessus pour voir la différence.
Images réactives
Les images responsives sont des images qui s'adaptent parfaitement à n'importe quelle taille de navigateur.
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 :
Notez que dans l’exemple ci-dessus, l’image peut être agrandie pour être plus grande que sa taille d’origine. Une meilleure solution, dans de nombreux cas, sera d'utiliser la propriété max-width à la place.
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 :
Afficher différentes images en fonction de la largeur du navigateur
L'élément HTML <picture> vous permet de définir différentes images pour différentes tailles de fenêtre de navigateur.
Redimensionnez la fenêtre du navigateur pour voir comment l'image ci-dessous change en fonction de la largeur :
Exemple
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Try it Yourself »
Taille du texte réactif
La taille du texte peut être définie avec une unité "vw", ce qui signifie la "viewport width" ("largeur de la fenêtre").
De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur :
Hello World
Redimensionnez la fenêtre du navigateur pour voir comment la taille du texte évolue.
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.
Requêtes multimédias
En plus de redimensionner le texte et les images, il est également courant d'utiliser des requêtes multimédias dans les pages Web réactives.
Avec les requêtes multimédias, vous pouvez définir des styles complètement différents pour différentes tailles de navigateur.
Exemple : redimensionnez la fenêtre du navigateur pour voir que les trois éléments div ci-dessous s'afficheront horizontalement sur les grands écrans et empilés verticalement sur les petits écrans :
Exemple
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
Try it Yourself »
Astuce : Pour en savoir plus sur les Media Queries et le Responsive Web Design, lisez notre Tutoriel RWD.
Page Web réactive — Exemple complet
Une page Web réactive doit s'afficher correctement sur les grands écrans de bureau et sur les petits téléphones mobiles.
Conception Web réactive – Frameworks
Tous les frameworks CSS populaires offrent un design réactif.
Ils sont gratuits et faciles à utiliser.
W3.CSS
W3.CSS est un framework CSS moderne prenant en charge par défaut la conception sur ordinateur, tablette et mobile.
W3.CSS est plus petit et plus rapide que les frameworks CSS similaires.
W3.CSS est conçu pour être une alternative de haute qualité à Bootstrap.
W3.CSS est conçu pour être indépendant de jQuery ou de toute autre bibliothèque JavaScript.
W3.CSS Demo
Redimensionnez la page pour voir la réactivité !
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Exemple
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
Try it Yourself »
Pour en savoir plus sur W3.CSS, lisez notre Tutoriel W3.CSS.
Bootstrap
Un autre framework CSS populaire est Bootstrap. Bootstrap utilise HTML, CSS et jQuery pour créer des pages Web réactives.
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>
Try it Yourself »
Pour en savoir plus sur Bootstrap, rendez-vous sur notre Tutoriel Bootstrap.
