Comment faire - Texte réactif
Apprenez à créer une typographie réactive avec CSS.
Bonjour le monde
Redimensionnez la fenêtre du navigateur pour voir comment la taille de la police est mise à l'échelle.
Taille de police réactive
La taille du texte peut être définie avec une vw
unité, c'est-à-dire la "largeur de la fenêtre".
De cette façon, la taille du texte suivra la taille de la fenêtre du navigateur :
Exemple
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Viewport est la taille de la fenêtre du navigateur. 1vw = 1 % de la largeur de la fenêtre. Si la fenêtre a une largeur de 50 cm, 1vw est de 0,5 cm.
Modifier la taille de la police avec les requêtes multimédias
Vous pouvez également utiliser des requêtes multimédias pour modifier la taille de la police d'un élément sur des tailles d'écran spécifiques :
Taille de police variable.
Exemple
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Conseil : accédez à notre didacticiel sur les polices CSS pour en savoir plus sur les polices.
Pour en savoir plus sur les requêtes multimédias, lisez notre didacticiel CSS Media Queries .