Comment créer une police réactive dans CSS
La réactivité est un facteur essentiel dans les applications Web. Les développeurs rendent les conceptions, les images et les div réactives sur les pages Web; Cependant, il n'y en a que quelques-uns qui pensent à faire de la réactivité des polices. Parce que lorsque la page est passée d'un appareil à un autre, comme du bureau au mobile, il peut perturber la lisibilité de la police. Pour rendre les polices visibles, le facteur de réactivité doit être ajouté.
Cet article expliquera comment créer des polices réactives à l'aide de CSS.
Comment créer une police réactive dans CSS?
Pour créer une police réactive dans CSS, nous utiliserons les méthodes suivantes:
-
- Unités de fenêtre
- Requêtes médiatiques
- Fonction CLAMP ()
Passons de l'avant et explorons chaque méthode individuellement!
Méthode 1: Utilisation des unités de la fenêtre pour créer des polices réactives dans CSS
La zone visible d'une page de navigateur est connue sous le nom de fenêtre. Dans CSS, certaines unités y sont liées, rapidement connues sous le nom de «unités de fenêtre". Ces unités sont utiles pour rendre les choses réactives et améliorer la visibilité en ce qui concerne un spectateur.
Voici quatre unités de fenêtre décrites ci-dessous:
| Valeurs | Description |
| vw | VW représente la largeur de la fenêtre. Il rend les éléments réactifs dans les manières larges en termes de largeur concernant une page. 1% de la page équivaut à 1 VW. |
| vh | VH représente la hauteur de la fenêtre. Il rend les éléments réactifs dans les manières à hauteur concernant une page. 1% de la page équivaut à 1vh. |
| vmin | VMIN représente le minimum de la fenêtre. Il est utilisé pour spécifier la hauteur ou la largeur minimale de la fenêtre par rapport à un élément. |
| vmax | Vmax représente le maximum de la fenêtre. Il est utilisé pour spécifier la hauteur ou la largeur maximale de la fenêtre par rapport à un élément. |
Prenons un exemple pour reconnaître le fonctionnement de l'unité de la fenêtre.
Exemple
Dans notre fichier html, écrivez du texte dans le « Html Indice de linux CSS Méthode 2: Utilisation de requêtes multimédias pour créer des polices réactives dans CSS Dans CSS, "requêtes médiatiques»Aide à appliquer différentes conditions de style sur des éléments spécifiques. C'est un ensemble de règles qui ne peut être appliqué que si la condition définie est vraie. En développement, les requêtes médiatiques sont souvent utilisées pour rendre les éléments ou les conceptions réactives en ce qui concerne les appareils / types médiatiques. Lorsque la propriété de taille de police est placée dans le set de règle @Media, elle obtient les résultats souhaités. Exemple Définissez la page minimale de la page comme «799px" en utilisant "@médias»Et ajoutez le élément à l'intérieur de cette règle. Cela indique que la règle définie ne sera appliquée que si la largeur de la page est égale ou supérieure à 799px. Maintenant, spécifiez le «taille de police«Propriété comme«20px". Cela rendra la police plus grande que sa taille normale. CSS Méthode 3: Utilisation de clamp () pour créer des polices réactives dans CSS Le "serrer()»La fonction est utilisée pour spécifier une valeur minimale et maximale fixe. En d'autres termes, il est généralement défini comme une plage initiale et de fin pour une valeur spécifique. La fonction CLAMP () fournit un grand contrôle sur les éléments liés à leur réactivité. Exemple Utiliser "taille de police"Propriété le long de la valeur"pince (10px, 2.5vw, 30px)"Là où le 10px est la valeur minimale, 30px est le maximum et le 2.5VW est la valeur actuelle de la police sélectionnée. Cette fonction rendra la police réactive sous les limites définies. CSS Conclusion Pour créer une police réactive, "unités de fenêtre","requêtes médiatiques" ou "Fonction CLAMP ()" peut être utilisé. Il existe quatre unités de fenêtres VW, VH, VMIN et VMAX qui aident à créer des polices réactives. De plus, CSS @Media est également utilisé pour appliquer différentes conditions de style à des éléments spécifiques. La fonction CLAMP () peut également être utilisée pour rendre les polices réactives. Dans cet article, nous avons couvert comment créer des polices réactives dans CSS.
Dans le fichier CSS, spécifiez le «taille de police«Propriété avec la valeur»2.5vw". Cela rendra la police réactive par rapport à la largeur de la page.p
taille de police: 2.5VW;
Enregistrez votre code et testez-le dans votre navigateur:@Media (Min-Width: 799px)
p
taille de police: 20px;
Sortirp
taille de police: pince (10px, 2.5VW, 30px);
Sortir
Nous avons décrit trois méthodes efficaces pour créer une police réactive dans CSS.