Navigation adaptative

Construis une navigation qui scrolle horizontalement sur petit écran puis devient distribuee sur grand écran.

Objectifs de la leçon

  • Comprendre Navigation adaptative.
  • Modifier .toolbar sans casser le mobile.
  • Verifier le résultat à plusieurs tailles.

Objectif

Construis une navigation qui scrolle horizontalement sur petit écran puis devient distribuee sur grand écran.

Le responsive se prouve avec plusieurs largeurs, pas avec une capture unique.

Méthode

Travaille d'abord sur .toolbar, puis elargis seulement si le rendu le justifié.

Une bonne règle responsive protege le contenu sans figer la mise en page.

Validation

Teste petit écran, desktop et contenu long.

Reduis les animations si l'utilisateur le demandé.

Vocabulaire lié

  • .toolbar — Zone ciblée pour garder l'exercice précis.
  • display: flex — Contrainte responsive à vérifier.
  • viewport — Largeur disponible qui influence le rendu.

Validation

  • Je teste à plusieurs largeurs.
  • Je protege les contenus longs.
  • Je peux expliquer le breakpoint.

Ouvrir la leçon interactive