Module 2La mise en page
Chapitre 11 sur 15
Le responsive design
Adapter une page à tous les écrans : viewport, media queries, mobile first et médias fluides.
- ≈ 165 min
- 7 leçons
- 4 vidéos
- 3 exercices
Module 2La mise en page
Chapitre 11 sur 15
Adapter une page à tous les écrans : viewport, media queries, mobile first et médias fluides.
Objectifs
Avec ce chapitre, tu sauras…
min-width et max-width ;max-width, object-fit, clamp()) ;Plus de la moitié des visites sur le web se font depuis un téléphone. Un site qui n'est pas lisible sur mobile perd la moitié de ses visiteurs, et Google classe les pages d'après leur version mobile. Le responsive design consiste à écrire un seul site qui s'adapte à toutes les tailles d'écran.
Leçon 1
Vidéo · À regarder
FRCréer des Sites Web Responsives avec les Media Queries CSS
OpenClassrooms en Français · YouTube
Leçon 2
| Écriture | Les règles s'appliquent… |
|---|---|
@media (min-width: 768px) | quand la fenêtre fait au moins 768 px de large |
@media (max-width: 767px) | quand la fenêtre fait au plus 767 px |
@media (768px <= width <= 1099px) | entre 768 et 1099 px (syntaxe moderne) |
@media (orientation: landscape) | en mode paysage |
@media print | à l'impression |
Leçon 3
| Nom | min-width | Appareils typiques |
|---|---|---|
| base (sans media query) | — | téléphones (320 à 480 px) |
sm | 640 px | grands téléphones en paysage |
Leçon 4
| Valeur | Effet |
|---|---|
fill (défaut) | l'image est déformée pour remplir la boîte |
cover | l'image remplit la boîte et est recadrée (le plus utilisé) |
contain | l'image est entière dans la boîte, avec des bandes vides |
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Leçon 5
Leçon 6
Leçon 7
1Sans <meta name="viewport">, sur mobile…
2@media (min-width: 768px) s'applique…
3La démarche mobile first utilise surtout…
4Pour qu'une image remplisse sa boîte sans être déformée :
5Les media queries doivent être placées…
6Pour détecter le thème sombre de l'utilisateur :
L'essentiel du chapitre
@media (min-width: 768px) { ... } : les règles s'appliquent à partir de 768 px.min-width pour enrichir. Les media queries vont après les règles qu'elles modifient.img { max-width: 100%; height: auto; }, object-fit: cover, aspect-ratio, clamp(), min().prefers-color-scheme, prefers-reduced-motion, @media print. Teste avec le mode responsive des DevTools.@media (prefers-color-scheme: dark) | si l'utilisateur a choisi le thème sombre |
@media (prefers-reduced-motion: reduce) | si l'utilisateur veut moins d'animations |
@media (hover: hover) | si l'appareil a une souris (pas un écran tactile) |
Vidéo · À regarder
FRFormation CSS, tuto complet pour démarrer
L'instant Code · YouTube
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
md | 768 px | tablettes |
lg | 1024 px | petits ordinateurs portables |
xl | 1280 px | écrans de bureau |
Une vidéo française d'OpenClassrooms de sept minutes, entièrement consacrée aux media queries et aux sites responsives. Regarde-la en entier avant la section 2.
/* Styles de base : pour tous les écrans */
.cartes {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
/* À partir de 768px de large (tablettes et plus) */
@media (min-width: 768px) {
.cartes {
grid-template-columns: repeat(2, 1fr);
}
}
/* À partir de 1100px (ordinateurs) */
@media (min-width: 1100px) {
.cartes {
grid-template-columns: repeat(3, 1fr);
}
}Tableau: Lire une media query
min-width pour enrichir la mise en page quand l'écran s'élargit : deux colonnes, menu horizontal, barre latérale.La version mobile est la plus contrainte : elle t'oblige à garder l'essentiel. Agrandir une mise en page simple est facile ; faire rentrer un site de bureau complexe dans un téléphone est un casse-tête, et on finit par empiler des max-width qui annulent des règles. Bonus : les téléphones, souvent moins puissants, lisent moins de CSS.
Tableau: Des points de rupture courants
img,
video {
max-width: 100%; /* jamais plus large que le conteneur */
height: auto; /* garde les proportions */
display: block; /* supprime le petit espace sous les images */
}
.vignette {
width: 100%;
aspect-ratio: 4 / 3; /* toujours le même rapport */
object-fit: cover; /* recadre au lieu de déformer */
}
h1 {
font-size: clamp(2rem, 5vw + 1rem, 3.5rem); /* titre fluide */
}
.conteneur {
width: min(100% - 2rem, 1100px); /* 1rem de marge sur mobile, 1100px maximum */
margin-inline: auto;
}Tableau: object-fit
/* --- Mobile : tout est empilé --- */
.entete {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.entete ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1rem;
}
.page {
display: grid;
grid-template-areas:
"contenu"
"lateral";
gap: 2rem;
}
/* --- Tablette et plus --- */
@media (min-width: 768px) {
.entete {
flex-direction: row;
justify-content: space-between;
}
}
/* --- Ordinateur --- */
@media (min-width: 1024px) {
.page {
grid-template-columns: 1fr 300px;
grid-template-areas: "contenu lateral";
}
}/* Thème sombre automatique */
@media (prefers-color-scheme: dark) {
body {
background-color: #0f172a;
color: #e2e8f0;
}
}
/* Moins d'animations pour les personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
/* Impression : pas de menu, texte noir, liens affichés */
@media print {
nav, .retour-haut, form { display: none; }
body { color: black; background: white; font-size: 12pt; }
a[href^="http"]::after { content: " (" attr(href) ")"; }
}Un recruteur imprime parfois les CV en ligne. Une feuille @media print de dix lignes (pas de menu ni de formulaire, texte noir sur blanc, adresses des liens visibles) fait une très bonne impression, au sens propre. Teste-la avec Ctrl + P.
F12), puis clique sur l'icône téléphone et tablette (ou Ctrl + Maj + M).http://adresse-ip-de-ton-pc:5500 depuis le même réseau Wi-Fi.Ajoute à ton CV une feuille d'impression : masque le menu, le formulaire et le bouton retour en haut ; texte noir en 11pt sur fond blanc ; affiche l'adresse des liens LinkedIn et GitHub après leur texte ; évite qu'une expérience soit coupée entre deux pages (break-inside: avoid).
Rends ton CV entièrement responsive en mobile first : sur mobile, tout est empilé, le menu est centré et passe à la ligne ; à partir de 768px, l'en-tête est sur une ligne (nom à gauche, menu à droite) et les compétences sur deux colonnes ; à partir de 1024px, la section « À propos » met la photo à gauche et le texte à droite. Teste de 320px à 1400px.
Sur grand écran, les cartes restent sur une colonne. Pourquoi ? Corrige.
@media (min-width: 768px) {
.cartes { grid-template-columns: repeat(3, 1fr); }
}
.cartes {
display: grid;
grid-template-columns: 1fr;
}Une media query ne change pas la spécificité : à spécificité égale, c'est toujours la dernière règle qui gagne (chapitre 3). Si tu écris tes media queries avant les styles de base, elles seront écrasées. Place-les après les règles qu'elles modifient, généralement en fin de fichier ou juste sous chaque composant.
Les media queries dans la formation de L'instant Code : deux minutes pour revoir la syntaxe.
Le chapitre « Media Queries » de Dave Gray (anglais) : 26 minutes de détail sur les media queries.
Ne cible pas des modèles de téléphones précis : il en existe des centaines. Élargis lentement la fenêtre dans le mode responsive des DevTools et ajoute un point de rupture là où ta mise en page commence à casser (lignes trop longues, cartes trop étirées). Et souviens-toi : avec Flexbox wrap et Grid auto-fit, beaucoup de mises en page n'ont besoin d'aucune media query.
Le chapitre « Images » de Dave Gray (anglais) : 46 minutes sur les images en CSS. Regarde au moins le début, puis reviens-y si object-fit ou les images de fond te posent problème.