Comment créer : texte réactif

Taille de police réactive

La taille du texte peut être vw Unité de configuration, ce qui signifie "largeur de la fenêtre de visualisation".

Ainsi, la taille du texte suivra la taille de la fenêtre du navigateur :

<h1 style="font-size:8vw;">Bonjour le monde</h1>
<p style="font-size:2vw;">Ajustez la taille de la fenêtre du navigateur pour voir comment la taille de la police s'ajuste.</p>

Essayer vous-même

Remarque :La fenêtre de visualisation est la taille de la fenêtre du navigateur.1vw = 1% de la largeur de la fenêtre de visualisation. Si la largeur de la fenêtre de visualisation est de 50 cm, alors 1vw Pour 0,5 cm.

Modifier la taille de la police avec une requête média

Vous pouvez également utiliser les requêtes média pour modifier la taille de la police des éléments pour une taille d'écran spécifique :

Voir l'effet

/* Si la largeur de l'écran est de 601px ou plus, configurez la taille de la police de <div> sur 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}
/* Si la largeur de l'écran est de 600px ou moins, configurez la taille de la police de <div> sur 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Essayer vous-même

Pages liées

Tutoriel :Polices CSS

Tutoriel :Requêtes média CSS