HTML Conception Web Responsive
La conception web responsive consiste à créer des pages web qui s'affichent correctement sur tous les appareils !
Une conception web responsive s'ajustera automatiquement aux différentes tailles d'écran et aux différents affichages.
Qu'est-ce que la Conception Web Responsive ?
La Conception Web Responsive consiste à utiliser HTML et CSS pour redimensionner, cacher, réduire ou agrandir automatiquement un site web, afin qu'il soit esthétique sur tous les appareils (ordinateurs de bureau, tablettes et téléphones) :
Définir le Viewport
Pour créer un site web responsive, ajoutez la balise <meta> suivante à toutes vos pages web :
Exemple
<meta name="viewport" content="width=device-width, initial-scale=1.0"> Cela définira le viewport de votre page, ce qui donnera au navigateur des instructions sur la façon de contrôler les dimensions et l'échelle de la page.
Voici un exemple d'une page web sans la balise meta viewport, et la même page web avec la balise meta 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 Responsives
Les images responsives sont des images qui s'adaptent bien à toute taille de navigateur.
Utilisation de la Propriété width
Si la propriété CSS width est définie à 100%, l'image sera responsive et s'ajustera :
Exemple
<img src="img_girl.jpg" style="width:100%;" > Remarquez 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 à 100%, l'image se réduira si nécessaire, mais ne s'agrandira jamais pour dépasser sa taille d'origine :
Exemple
<img src="img_girl.jpg" style=" max-width:100%; height:auto;"> Afficher Différentes Images Selon la Largeur du Navigateur
L'élément HTML <picture> vous permet de définir différentes images pour différentes tailles de fenêtres 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="Fleurs">
</picture> Taille de Texte Responsive
La taille du texte peut être définie avec une unité "vw", qui signifie "largeur du viewport".
De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur :
Bonjour le Monde
Redimensionnez la fenêtre du navigateur pour voir comment la taille du texte s'ajuste.
Exemple
<h1 style=" font-size:10vw ">Bonjour le Monde</h1> Le viewport est la taille de la fenêtre du navigateur. 1vw = 1% de la largeur du viewport. Si le viewport fait 50 cm de large, 1vw fait 0,5 cm.
Media Queries
En plus de redimensionner le texte et les images, il est également courant d'utiliser des media queries dans les pages web responsives.
Avec les media queries, 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 s'empileront verticalement sur les petits écrans :
Exemple
<style>
.left, .right {
float: left;
width: 20%; /* La largeur est de 20%, par défaut */
}
.main {
float: left;
width: 60%; /* La largeur est de 60%, par défaut */
}
/* Utilisez une media query pour ajouter un point de rupture à 800px : */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* La largeur est de 100%, lorsque le viewport est de 800px ou moins */
}
}
</style> Astuce : Pour en savoir plus sur les Media Queries et la Conception Web Responsive, lisez notre Tutoriel RWD .
Page Web Responsive - Exemple Complet
Une page web responsive doit être esthétique sur de grands écrans d'ordinateur de bureau et sur de petits téléphones mobiles.
Avez-vous déjà entendu parler de formation-ti.org Spaces ? Ici, vous pouvez créer votre site web à partir de zéro ou utiliser un modèle.
* aucune carte de crédit requise
Conception Web Responsive - Frameworks
Tous les frameworks CSS populaires offrent une conception responsive.
Ils sont gratuits et faciles à utiliser.
W3.CSS
W3.CSS est un framework CSS moderne avec un support par défaut pour la conception de bureau, de tablette et mobile.
W3.CSS est plus léger et plus rapide que d'autres frameworks CSS similaires.
W3.CSS est conçu pour être indépendant de jQuery ou de toute autre bibliothèque JavaScript.
Démo W3.CSS
Redimensionnez la page pour voir la réactivité !
Londres
Londres est la capitale de l'Angleterre.
C'est la ville la plus peuplée du Royaume-Uni, avec une zone métropolitaine de plus de 13 millions d'habitants.
Paris
Paris est la capitale de la France.
La région parisienne est l'un des plus grands centres de population en Europe, avec plus de 12 millions d'habitants.
Tokyo
Tokyo est la capitale du Japon.
C'est le centre de la Grande Région de Tokyo, et la zone métropolitaine la plus peuplée du monde.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.formation-ti.org/w3css/4/w3.css">
</head>
<body>
<div class="w3-container w3-green">
<h1>Démo formation-ti.org</h1>
<p>Redimensionnez cette page responsive !</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>Londres</h2>
<p>Londres est la capitale de l'Angleterre.</p>
<p>C'est la ville la plus peuplée du Royaume-Uni,
avec une zone métropolitaine de plus de 13 millions d'habitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris est la capitale de la France.</p>
<p>La région parisienne est l'un des plus grands centres de population en Europe,
avec plus de 12 millions d'habitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon.</p>
<p>C'est le centre de la Grande Région de Tokyo,
et la zone métropolitaine la plus peuplée du monde.</p>
</div>
</div>
</body>
</html> Pour en savoir plus sur W3.CSS, lisez notre Tutoriel W3.CSS .
Bootstrap
Un autre framework CSS populaire est Bootstrap :
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemple Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Ma Première Page Bootstrap</h1>
<p>Redimensionnez cette page responsive pour voir l'effet !</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Colonne 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Colonne 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Colonne 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div> Pour en savoir plus sur Bootstrap, rendez-vous sur notre Tutoriel Bootstrap .