LabEx
EntrerRejoindre

Typographie fluide responsive avec CSS

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons apprendre à implémenter une typographie fluide à l'aide de CSS. La typographie fluide assure que le texte s'adapte en fonction de la largeur de la fenêtre d'affichage, ce qui en fait une conception plus réactive et accessible pour différentes tailles d'écran. En utilisant la fonction clamp() et une formule pour calculer des valeurs réactives pour font-size, nous pouvons créer une conception plus dynamique et conviviale.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 94%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Typographie fluide

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer un texte qui s'adapte en taille en fonction de la largeur de la fenêtre d'affichage, vous pouvez utiliser CSS. Une façon de le faire est d'utiliser la fonction clamp() pour définir les tailles de police minimale et maximale. Une autre façon est d'utiliser une formule pour calculer une valeur réactive pour la taille de police. Voici un exemple d'élément HTML avec une classe fluid-type :

<p class="fluid-type">Hello World!</p>

Voici le code CSS correspondant qui définit la taille de police pour qu'elle s'adapte entre 1rem et 3rem en fonction de la largeur de la fenêtre d'affichage :

.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire de Typographie fluide. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.