Créer des polices réactives en CSS
- Utilisez la valeur de la fenêtre d’affichage pour créer des polices réactives en CSS
- Utilisez des requêtes multimédias pour créer des polices réactives en CSS
-
Utilisez la fonction
calc()pour créer des polices réactives en CSS -
Utilisez la fonction
clamp()pour créer des polices réactives en CSS
L’article explique les moyens d’implémenter des polices réactives uniquement en utilisant CSS. Nous présenterons plusieurs façons dont les CSS et CSS3 modernes rendent les polices lisibles sur des appareils de différentes tailles d’écran.
Utilisez la valeur de la fenêtre d’affichage pour créer des polices réactives en CSS
L’un des moyens les plus simples de rendre les polices réactives consiste à redimensionner les polices en fonction de la taille de la fenêtre d’affichage ou de la taille de la fenêtre du navigateur. Il existe différentes unités de fenêtre, en relation avec les axes de la fenêtre du navigateur, fournies par CSS qui sont très utiles pour créer des pages Web réactives. Certaines unités de fenêtre sont vw, vh, vmin et vmax. Nous pouvons obtenir les informations de ces unités à partir des unités CSS. Nous pouvons utiliser ces unités de fenêtre au lieu de em, px ou pt pour créer les polices réactives.
Par exemple, créez chacune des balises h1, h2 et p. Écrivez un texte de votre choix entre ces balises. En CSS, définissez la propriété font-size des balises h1, h2 et p sur 5.9vw, 3.0vh et 2vmin respectivement.
Lorsque nous redimensionnons le navigateur, la fenêtre d’affichage du navigateur change et la taille de la police des textes change également en conséquence. De cette façon, nous pouvons utiliser les unités de la fenêtre dans la taille de la police pour créer une police réactive en CSS.
Exemple de code :
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Utilisez des requêtes multimédias pour créer des polices réactives en CSS
Nous pouvons utiliser les media queries pour créer des polices réactives en CSS. Nous pouvons également utiliser des requêtes multimédias pour modifier la taille de la police à une certaine hauteur/largeur de l’appareil. Nous utilisons le mot-clé @media pour écrire la requête média.
Par exemple, définissez la propriété font-size sur 3em. Ensuite, écrivez la requête média avec la condition max-width:320px. Ensuite, définissez la propriété font-size sur 2em.
Exemple de code :
body{
font-size: 3em;
}
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
Ici, la taille de la police sera réduite lorsque le code ci-dessus sera implémenté et exécuté sur des appareils avec une taille d’écran inférieure à 320px. La police est définie sur 2em pour les appareils ayant une hauteur inférieure à 320px. Et les polices seront à 3em pour les appareils ayant une taille d’écran supérieure à 320px.
L’inconvénient de cette méthode est que nous pourrions avoir besoin d’ajouter plus de requêtes multimédias si la conception commence à s’introduire dans des périphériques d’une taille spécifique.
Utilisez la fonction calc() pour créer des polices réactives en CSS
Étant donné que la plupart des navigateurs modernes prennent aujourd’hui en charge la méthode calc() en CSS, cela facilite l’écriture de code réactif. De plus, cette méthode est également plus efficace et accomplit la tâche sans rendre le code désordonné. Nous pouvons utiliser la fonction calc() pour rendre la taille de la police réactive. Le résultat de la fonction est la valeur de la propriété.
Par exemple, définissez la propriété font-size de la balise body sur la fonction calc(). À l’intérieur de la fonction, écrivez 0.75em + 1vw.
Exemple de code :
body {
font-size: calc(0.75em + 1vw);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
La taille de la police variera au fur et à mesure que la valeur de 1vw change sur les appareils avec des tailles d’écran différentes. Ainsi, nous pouvons créer une police responsive en CSS.
Utilisez la fonction clamp() pour créer des polices réactives en CSS
La fonction clamp() bloque les valeurs entre les valeurs maximales et minimales. La fonction prend trois paramètres comme argument, le premier est la valeur minimale, le second est la valeur préférée et le dernier est la valeur maximale autorisée. Nous pouvons utiliser la fonction clamp() pour définir n’importe quelle propriété telle que length, angle, percentage, number, etc. Nous pouvons utiliser la fonction pour créer la police réactive en CSS.
Exemple de code :
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
