📱 Le cours : une page pour tous les écrans
Une grande partie des visites se fait aujourd'hui sur téléphone, et le même site doit rester agréable sur un ordinateur de bureau ou une tablette. On n'écrit pas trois sites : on écrit une page qui s'adapte. C'est le *responsive design*.
La balise viewport
Par défaut, un téléphone suppose que les pages sont conçues pour un grand écran et les affiche « dézoomées ». La balise <meta name="viewport" content="width=device-width, initial-scale=1">, placée dans le <head>, dit au navigateur d'utiliser la vraie largeur de l'appareil. Sans elle, aucune media query ne se comportera comme prévu sur mobile (voir Structure).
Mobile first
L'approche recommandée : écrire d'abord le CSS pour le plus petit écran (une colonne, des éléments empilés), puis ajouter des règles avec min-width quand l'écran s'élargit. Le code de base reste léger et simple, et un appareil qui ne comprend pas les media queries obtient quand même une page correcte.
Les media queries
@media (condition) { règles } applique les règles seulement si la condition est vraie. Les conditions les plus courantes :
| Condition | Se lit |
|---|
(min-width: 768px) | écran large d'au moins 768 px |
(max-width: 600px) | écran large d'au plus 600 px |
(min-width: 600px) and (max-width: 900px) | entre 600 et 900 px |
(orientation: landscape) | plus large que haut |
(hover: hover) | l'appareil sait survoler (souris), pas un écran tactile |
print | à l'impression |
Les largeurs de rupture (*breakpoints*) classiques sont proches de 576, 768, 1024 et 1280 px, mais le meilleur critère est ton contenu : ajoute une rupture là où la mise en page casse, pas à des valeurs apprises par cœur.
Un menu qui s'adapte
Exemple type : un menu empilé sur téléphone, en ligne à partir de la tablette.
.menu {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
@media (min-width: 768px) {
.menu {
flex-direction: row;
gap: 1.5rem;
}
}
Des dimensions fluides
- Évite les largeurs fixes en pixels pour les conteneurs :
width: 960px provoque un défilement horizontal sur téléphone. Préfère max-width (une limite) et width: 100%.
- Les images :
max-width: 100%; height: auto; les empêche de dépasser (voir aussi srcset dans Médias).
- Les grilles et rangées :
flex-wrap: wrap et repeat(auto-fit, minmax(…)) s'adaptent sans media query (voir Grid).
- Les tailles de texte :
rem pour respecter les réglages de l'utilisateur, clamp(min, préféré, max) pour une taille qui évolue en douceur avec l'écran.
Respecter les préférences de l'utilisateur
Le navigateur connaît des choix faits dans le système : thème sombre, réduction des animations. Une media query permet d'en tenir compte. Avec des variables CSS (voir Pseudo-classes et variables), le thème sombre se règle en quelques lignes :
:root {
--fond: #ffffff;
--texte: #14141a;
}
@media (prefers-color-scheme: dark) {
:root {
--fond: #14141a;
--texte: #f7f2ea;
}
}
body {
background: var(--fond);
color: var(--texte);
}
Tester sa page
- Dans le navigateur,
F12 puis le mode appareil (Ctrl + Maj + M) simule un téléphone et permet de choisir la largeur.
- Redimensionne la fenêtre à la main : repère où la mise en page casse, ajoute une rupture à cet endroit.
- Teste le zoom à 200 % et, si possible, un vrai téléphone : la taille des zones tactiles se juge au doigt (au moins 44 px de côté).
