Lab Responsive mobile-first
Assemble une base responsive mobile-first avec des règles lisibles, testables et reliées au scenario PulsaConf.
Objectifs de la leçon
- Implémenter Lab Responsive mobile-first sans perdre le scenario PulsaConf.
- Relier width au risque : un design pense desktop force le zoom, le scroll horizontal ou des lignes illisibles.
- Prouver que le rendu tient a 375 px, respire sur desktop et reste fluide.
Intention
Assemble une base responsive mobile-first avec des règles lisibles, testables et reliées au scenario PulsaConf.
width doit repondre à une contrainte visible, pas décorer au hasard.
Méthode
Cible .panel, ajoute une declaration utile, puis inspecte la règle active.
Le risque a éviter est : un design pense desktop force le zoom, le scroll horizontal ou des lignes illisibles.
Validation
Lab Responsive mobile-first est termine quand les tests passent et que le rendu tient a 375 px, respire sur desktop et reste fluide.
Relis aussi le focus, les textes longs et le petit écran.
Vocabulaire lié
- width — Propriété ou motif CSS valide dans cette étape.
- .panel — Sélecteur cible pour limiter les effets de bord.
- responsive — Capacité à rester utilisable selon les contraintes d'écran et de contenu.
Validation
- Je sais appliquer width.
- Je prouve que le rendu tient a 375 px, respire sur desktop et reste fluide.
- Je peux expliquer le choix.