Mission : une page lisible pour tous
Un même contenu peut devenir difficile à consulter selon la largeur de l'écran. Explore les deux organisations, compare leurs effets, puis découvre comment les reproduire en CSS.
- Choisis un écran.
- Observe les colonnes rigides.
- Active la disposition adaptable et compare.
- Essaie la règle CSS sur un exemple personnel.
1. Observe les conséquences
Découvrir mon atelier
Ce que ton choix change
2. Compare à écran identique
Les deux miniatures représentent le même écran choisi. Seule la règle de disposition change. L'aperçu est volontairement réduit : il ne reproduit pas exactement la taille physique d'un appareil.
Colonnes rigides
Disposition adaptable
3. À toi de jouer : adapter une autre page
Imagine une page de bibliothèque avec trois rubriques. Quelle règle choisirais-tu pour éviter des colonnes trop étroites sur téléphone ?
La règle CSS à retenir
Dans un projet réel, une media query peut modifier la disposition lorsque la place manque :
.rubriques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 600px) {
.rubriques { grid-template-columns: 1fr; }
}Ce code est un exemple à adapter : le seuil de 600 px n'est pas une règle universelle. Vérifie aussi les images, les menus et la navigation au clavier.
Que faut-il retenir ?
Une mise en page responsive tient compte de l'espace disponible et du contenu. On ne cherche pas seulement à faire tenir des blocs : on préserve leur lisibilité et leur accessibilité. Essaie ensuite cette règle dans ta propre page et vérifie-la à plusieurs largeurs et à fort zoom.