Responsive design

Fonctionnalités Web : Requêtes de conteneur (taille) Unités de fenêtre d'affichage petites, grandes et dynamiques aspect-ratio min(), max() et clamp() Unités de fenêtre d'affichage

Bonnes pratiques générales

  • Utilisez les requêtes @container pour créer des mises en page responsives basées sur des composants qui s'adaptent à la taille de leur conteneur parent plutôt qu'à la fenêtre d'affichage. Pour en savoir plus, consultez Style adapté à la taille.
  • Utilisez des unités de fenêtre d'affichage dynamiques (dvh, dvw) au lieu de vh/vw pour éviter que la mise en page ne soit perturbée lorsque des éléments d'interface utilisateur du navigateur mobile (comme les barres d'adresse) apparaissent ou disparaissent.
  • Utilisez aspect-ratio pour les éléments multimédias (comme <img> et <video>) afin de réserver de l'espace pendant le chargement et d'éviter le Cumulative Layout Shift (CLS).

Pour en savoir plus sur les mécanismes de mise en page derrière l'UI responsive (flexbox, grille, unités de requête de conteneur, unités de fenêtre d'affichage), consultez Mises en page CSS et responsive design.

Typographie responsive

  • À FAIRE : Combinez des unités relatives à la fenêtre d'affichage et à la police dans clamp() pour obtenir des tailles de police qui s'adaptent à la taille de la fenêtre d'affichage tout en restant dans la plage souhaitée. Par exemple, clamp(2rem, 1rem + 5vw, 4rem). Ajustez la proportion d'unités relatives à la fenêtre d'affichage et à la police pour contrôler la vitesse à laquelle la taille de la police change.
  • À ÉVITER : N'utilisez pas vw seul pour la taille de police sans clamp(), car cela peut rendre le texte trop petit ou trop grand sur les écrans extrêmes.

Pour adapter la taille et l'espacement au conteneur plutôt qu'à la fenêtre d'affichage, consultez Scaling fluide.