Les médias responsives permettent de concevoir des sites web qui s'adaptent automatiquement à différentes tailles d'écran, comme les smartphones, tablettes et ordinateurs.
1. Utilisation des Media Queries
Les Media Queries permettent d'appliquer des styles spécifiques en fonction de la taille de l'écran.
Exemple :
/* Styles par défaut */
body {
font-size: 16px;
}
/* Styles pour les écrans de moins de 768px */
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
2. Grilles Responsives avec Flexbox
Flexbox est idéal pour créer des mises en page flexibles.
Exemple :
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 300px; /* Minimum 300px par élément */
margin: 10px;
background-color: lightblue;
}
HTML :
<div class="container">
<div class="item">Élément 1</div>
<div class="item">Élément 2</div>
<div class="item">Élément 3</div>
</div>
3. Grilles Responsives avec CSS Grid
CSS Grid permet de créer des mises en page complexes.
Exemple :
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.item {
background-color: lightgreen;
padding: 20px;
}
HTML :
<div class="grid">
<div class="item">Élément 1</div>
<div class="item">Élément 2</div>
<div class="item">Élément 3</div>
</div>
4. Images et Vidéos Responsives
Images fluides :
img {
max-width: 100%;
height: auto;
}
Vidéos fluides :
video {
max-width: 100%;
height: auto;
}
5. Exemple Pratique : Page Responsive Complète
HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Page Responsive</title>
</head>
<body>
<header>
<h1>Bienvenue</h1>
</header>
<main class="grid">
<section class="item">Section 1</section>
<section class="item">Section 2</section>
<section class="item">Section 3</section>
</main>
<footer>
<p>© 2025 Mon Site</p>
</footer>
</body>
</html>
CSS :
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 20px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
6. Conclusion
Les médias responsives sont essentiels pour offrir une expérience utilisateur optimale sur tous les appareils. En combinant Media Queries, Flexbox et CSS Grid, vous pouvez créer des designs modernes et adaptatifs.
Retour à la liste
Richard Bonnegent
Commentaires (0)