Responsive et mobile first
Unités relatives, media queries, mobile first.
Objectifs
À la fin de cette leçon, vous saurez :
- utiliser les unités relatives plutôt que les pixels fixes ;
- écrire des media queries ciblées ;
- appliquer la démarche mobile first.
Le problème des pixels fixes
Une mise en page en width: 1200px est parfaite sur votre écran… et catastrophique sur un téléphone. Le web se consulte sur des largeurs allant de 320px (petit mobile) à 2560px+ (grand écran) : la page doit s'y adapter toute seule.
Unités relatives
| Unité | Référence | Usage |
|---|---|---|
px | pixel absolu | bordures fines, détails |
% | parent | largeurs fluides |
rem | taille de police racine | espacements, tailles accessibles |
vw / vh | 1 % du viewport | sections plein écran |
body { font-size: 1rem; } /* 16px par défaut, respecte les réglages utilisateur */
.titre { font-size: 2rem; } /* double de la racine */
.conteneur { max-width: 60rem; margin: 0 auto; padding: 1rem; }
img { max-width: 100%; height: auto; } /* l'image ne déborde jamais */
La ligne sur les images est le correctif universel anti-débordement : à connaître par cœur.
Mobile first
Principe : écrire d'abord le style pour petit écran (simple, empilé), puis ajouter de la complexité pour les grands :
.deux-colonnes {
display: grid; /* mobile : une seule colonne */
}
@media (min-width: 48rem) { /* à partir de ~768px */
.deux-colonnes {
grid-template-columns: 1fr 1fr;
}
}
La media query n'ajoute que ce qui change. Avantage : le mobile — souvent la majorité des visiteurs — reçoit le code de base, sans surcharge.
Points de rupture usuels : ~48rem pour tablette/paysage, ~64-75rem pour desktop. Inutile d'en multiplier : deux ou trois suffisent, ajustés au contenu réel.
Exercice
- Ajoutez
box-sizing,max-widthsur images et un conteneur centré à votre CV. - Passez la grille « compétences/expériences » en mode mobile first (une colonne, puis deux à partir de 48rem).
- Testez avec DevTools : basculez la barre d'outils en mode responsive et vérifiez à 360px puis à 1280px.
Résumé
- rem/%/vw au lieu de px fixes ; images bornées à 100 %.
- Mobile first : base simple +
@media (min-width: ...)pour enrichir. - Deux ou trois breakpoints suffisent ; on teste dans DevTools.
Correction disponibleCherchez d’abord par vous-même.Voir la correction
Correction
Point de vigilance pour l'exercice 3
Si la page semble identique aux deux largeurs : vérifiez que le meta viewport est bien présent dans le head (width=device-width, initial-scale=1). Sans lui, le mobile simule un écran de 980px et vos media queries ne se déclenchent jamais — piège classique du responsive.