Comment changer la taille de police à l'aide de requêtes multimédias

Un site Web réactif modifie son apparence en fonction de l'appareil sur lequel il affiche. Dans le but de rendre un site Web réactif, utilisez les requêtes médiatiques CSS. Ces requêtes vous permettent de modifier une fonctionnalité particulière de votre site Web en fonction de la largeur, ou de la résolution d'écran de l'appareil. Par exemple, vous pouvez soit masquer un élément en fonction de la taille de l'écran ou modifier la taille de la police du contenu du site Web, etc. Ici, nous allons montrer comment vous pouvez modifier la taille de la police du texte apparaissant sur votre site Web à l'aide de requêtes multimédias.

Comment changer la taille des polices à l'aide de requêtes multimédias

Rendre le texte réactif sur un site Web est appelé typographie fluide, ce qui signifie que votre texte modifiera sa taille en fonction de la taille de l'écran de l'appareil. Ici, nous vous présenterons deux méthodes différentes pour rendre le texte de votre site Web réactif.

Méthode 1

La première méthode qui peut être utilisée pour rendre votre texte réactif est en utilisant des requêtes multimédias. Voici un exemple.

Html

Rendre le texte réactif sur un site Web est appelé typographie fluide, ce qui signifie que votre texte modifiera sa taille en fonction de l'écran
taille de l'appareil.

Ici, nous avons indiqué un paragraphe sur lequel nous allons montrer comment changer la taille de la police à l'aide d'une requête multimédia.

CSS

p.texte
Color d'arrière-plan: Azure;
rembourrage: 15px;

Tout d'abord, nous utilisons des CSS de base pour fournir une couleur d'arrière-plan et un rembourrage au paragraphe.

CSS

Écran @Media et (Min-Width: 700px)
p.texte
taille de police: 25px;

La première requête appliquée stipule que si la largeur d'écran minimale est de 700px ou plus large, la taille de la police du paragraphe sera de 25px.

CSS

Écran @media et (max-largeur: 699px)
p.texte
taille de police: 16px;

Et cette dernière requête indique que si la largeur maximale de l'écran est de 699px ou moins, la taille de la police du paragraphe sera 16px ou plus large.

Sortir

Lorsque la largeur de l'écran est de 700px ou plus large.

Lorsque la largeur de l'écran est de 699px et moins.

La taille de la police a été modifiée avec succès à l'aide de requêtes multimédias.

Méthode 2

La deuxième approche que vous pouvez utiliser pour redimensionner votre texte est en utilisant la largeur de la fenêtre. En utilisant cela, le texte modifiera en fonction de la taille du navigateur.

Html

Rendre votre texte réactif

Rendre le texte réactif sur un site Web est appelé typographie fluide, ce qui signifie que votre texte modifiera sa taille en fonction de l'écran
taille de l'appareil.

Dans le code ci-dessus, nous avons défini une rubrique et un paragraphe et nous appliquerons la largeur de la fenêtre sur ceux-ci pour modifier leur taille de police par rapport à la fenêtre du navigateur.

CSS

H2
taille de police: 9vw;

Ici, nous avons réglé la taille de la police de la tête vers 9vw. L'unité VW signifie la largeur de la fenêtre.

CSS

p
taille de police: 4vw;

En ce qui concerne la taille de la police du paragraphe, la taille de la police a été définie sur 4VW.

Sortir

La méthode fonctionne correctement.

Conclusion

Dans le but de faire apparaître le texte sur les pages Web, vous pouvez utiliser les requêtes multimédias. Dans la requête multimédia, spécifiez la taille de la police du texte à une largeur particulière et la taille de la police modifiera en fonction du type de périphérique. Une autre méthode pour effectuer cette tâche consiste à utiliser la largeur de la fenêtre. Cette méthode vous oblige simplement à attribuer une certaine taille de police au texte dans l'unité «VW». Ces deux méthodes ont été discutées dans ce post avec l'aide d'exemples pertinents.