Historique des conversations
Chargement...
Chapitre 12 : Responsive design et media queries
1. Qu’est-ce que le responsive design ?
Le responsive design permet à une page web de s’adapter automatiquement à différentes tailles d’écran (téléphone, tablette, ordinateur). Cela améliore l’accessibilité, l’expérience utilisateur et le référencement.
2. L’attribut meta viewport (indispensable)
Il faut toujours ajouter cette ligne dans le <head> de ta page HTML :
<meta name="viewport" content="width=device-width, initial-scale=1.0">Elle permet au navigateur de s’adapter à la largeur réelle de l’écran.
3. Qu’est-ce qu’une media query ?
Une media query permet d’appliquer des styles CSS uniquement si certaines conditions sont remplies (ex : largeur maximale).
@media (max-width: 768px) {
body {
background-color: lightgray;
}
}Dans cet exemple, la couleur de fond change si la largeur de l’écran est inférieure ou égale à 768px.
4. Utiliser les media queries pour adapter sa mise en page
Voici un exemple classique de grille responsive :
.col {
width: 33.33%;
float: left;
}
@media (max-width: 768px) {
.col {
width: 100%;
}
}<div class="col">Bloc 1</div>
<div class="col">Bloc 2</div>
<div class="col">Bloc 3</div>5. Breakpoints courants
Voici des tailles d’écrans couramment utilisées dans les media queries :
max-width: 576px— mobilemax-width: 768px— tablettemax-width: 992px— ordinateur portablemax-width: 1200px— grand écran
6. Outils pratiques pour tester le responsive
- ✅ L’inspecteur du navigateur (onglet mobile)
- ✅ Les outils comme responsivedesignchecker.com
- ✅ Le zoom et la largeur variable de fenêtre
Conclusion
Le responsive design est aujourd’hui indispensable. Grâce aux media queries, tu peux rendre ton site accessible et agréable sur tous les appareils. Dans le prochain chapitre, tu découvriras les bonnes pratiques et conventions pour organiser ton CSS efficacement.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 12
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Media Query de base
Atelier #1Change la couleur de fond du body en bleu pour les écrans de moins de 600px de large.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
@media (max-width: 600px) {
body {
background-color: blue;
}
}
#2 — Mobile-First
Atelier #2Par défaut un menu est caché. Affiche-le seulement sur les écrans de plus de 768px.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.menu { display: none; }
@media (min-width: 768px) {
.menu { display: block; }
}
#3 — Unité de police responsive
Atelier #3Quelle unité permet de définir une taille de police relative à la largeur de l'écran ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
L'unité vw (Viewport Width). Exemple : font-size: 5vw;
#4 — Flex responsive
Atelier #4Passe une direction flex de row à column pour les mobiles.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.container { display: flex; flex-direction: row; }
@media (max-width: 480px) {
.container { flex-direction: column; }
}
#5 — Balise Meta Viewport
Atelier #5Quelle balise HTML est indispensable pour que le responsive fonctionne sur mobile ?
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<meta name="viewport" content="width=device-width, initial-scale=1.0">