Typographie fluide CSS : guide d'utilisation de clamp() pour du texte évolutif-tutoriel CSS-php.cn

Typographie fluide CSS : guide d'utilisation de clamp() pour du texte évolutif

DDD

Libérer： 2024-09-18 18:35:16

original

229 Les gens l'ont consulté

Table des matières

Présentation
Utilisation de la fonction clamp() pour obtenir une typographie fluide
Conclusion

Introduction

Écrire des requêtes multimédias CSS peut parfois être ~~difficile~~ amusant, surtout lorsqu'il y a trop de choses à faire. Nous nous concentrons souvent tellement sur la création de la mise en page et sur la réactivité d’autres parties de notre site Web que cela devient stressant. Mais et si nous pouvions réduire ce stress en rendant notre texte évolutif, quelle que soit la taille de l'écran, sans avoir besoin d'écrire une tonne de requêtes multimédias ?

Plongeons-nous et commençons par découvrir comment obtenir une typographie fluide à l'aide de la fonction CSS clamp().

Utilisation de la fonction Clamp() pour obtenir une typographie fluide

Le problème

Voici une page Web de base avec une balise H1 et une balise P :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fluid Typography</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, sans-serif;
            background: #333;
            color: white;
            text-align: center;
        }

        h1{
            font-size: 5rem;
        }

        p{
            font-size: 3rem;
            color: red;
        }
    </style>
<body>
    <h1>CSS Fluid Typography</h1>
    <p>Why is this text not scalable</p>
</body>
</html>

Copier après la connexion

Voyons maintenant comment le texte se comporte sur différentes tailles d'écran

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Un moyen simple de rendre le texte ci-dessus réactif consiste à utiliser des requêtes multimédias, mais dans cet article, nous rendrons le texte réactif à l'aide de la fonction CSS clamp().

Mais avant cela, regardons d'abord l'unité vw (largeur de la fenêtre). L'unité vw vous permet de définir la taille de votre police par rapport à la largeur de la fenêtre d'affichage, rendant votre texte réactif.

Mettons à jour notre code existant avec les modifications suivantes :

<style>
  h1 {
    font-size: 10vw; /* H1 size is 10% of the viewport width */
  }
  p {
    font-size: 5vw;  /* p size is 5% of the viewport width */
    color: red;
  }
</style>

Copier après la connexion

Si la largeur de la fenêtre d'affichage est de 1 000 px :
La taille de la police h1 sera de 100px
La taille de la police p sera de 50px
Les tailles de police pour H1 et p continueront d'augmenter ou de diminuer à mesure que la largeur de la fenêtre d'affichage change.

Voyons à quoi ça ressemble :
CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

D'après le GIF ci-dessus, nous pouvons voir que l'utilisation de vw fonctionne pour le texte réactif mais manque de contraintes. À mesure que la largeur de la fenêtre augmente, la taille de la police continuera à croître sans limite et, de même, elle continuera à diminuer lorsque la largeur de la fenêtre diminuera.

C'est là que la fonction clamp() entre en jeu. clamp() vous permet de définir une taille de police minimale, préférée et maximale, permettant ainsi de contrôler la façon dont le texte évolue dans une plage définie.

La solution

Utilisation de la fonction clamp()

La fonction clamp() en CSS vous permet de définir une plage pour la taille de votre police.
Le format général est :

clamp(minimum, preferred, maximum)

Copier après la connexion

Minimum : La plus petite taille à laquelle votre texte peut être réduit.
Préféré : La taille idéale, souvent un pourcentage de la largeur de la fenêtre
Maximum : La taille la plus grande que votre texte peut atteindre.

Utilisons l'exemple ci-dessus et modifions le code avec ce qui suit

h1{
  font-size: clamp(24px, 5vw, 48px); /* Font size scales between 24px and 48px */
}

p{
  font-size: clamp(16px, 3vw, 24px) /* Font size scales between 16px and 24px)
}

Copier après la connexion

Voyons à quoi cela ressemble sur le navigateur :

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Désormais, les éléments h1 et p seront réactifs, car leurs tailles resteront dans la plage définie, garantissant qu'ils ne deviennent ni trop grands ni trop petits.

Conclusion

Dans cet article, nous avons appris comment réaliser une typographie fluide à l'aide de la fonction CSS clamp(). Merci d'avoir lu jusqu'ici. Je vous demande de lâcher un like et de partager cet article avec vos pairs qui en bénéficieront.

Que pensez-vous de cet article ? N'hésitez pas à partager vos réflexions dans la section commentaires ci-dessous.

P.S. Je suis actuellement à la recherche d'opportunités de développement frontend. Si vous avez des pistes ou recrutez, n'hésitez pas à consulter mon CV ou à me contacter sur LinkedIn. J'aimerais avoir de vos nouvelles !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!