Calculateur CSS clamp
Transformez une taille min et max plus deux largeurs de fenêtre en une valeur CSS clamp() fluide, calculée en direct dans votre navigateur.
Le calculateur CSS clamp s'exécute entièrement dans votre navigateur. Les largeurs de fenêtre, tailles et taille de police racine que vous saisissez ne quittent jamais votre appareil et rien n'est téléversé vers ArrayKit.
Ouvrir le convertisseur d'unités CSS
À propos de Calculateur CSS clamp
Le calculateur CSS clamp transforme quatre nombres — une taille min et max en pixels plus les deux largeurs de fenêtre auxquelles elles correspondent — en une valeur clamp() prête à coller pour une typographie et un espacement fluides. Il ajuste une droite entre vos deux points d'ancrage, calcule la pente en vw et l'ordonnée à l'origine en rem, et fixe le résultat à votre min sous la petite fenêtre et à votre max au-dessus de la grande. Un curseur d'aperçu en direct montre la taille rendue exacte à toute largeur intermédiaire, pour que vous jaugiez la rampe avant de la publier. Copiez la valeur clamp() brute, une déclaration font-size ou une valeur arbitraire Tailwind. Tout est calculé sur votre appareil — les tailles que vous tapez restent dans le navigateur et rien n'est téléversé vers ArrayKit.
Fonctionnalités
- Générez une valeur clamp(minRem, penteVw + origineRem, maxRem) à partir de quatre nombres
- Le curseur d'aperçu en direct montre la taille rendue à toute largeur de fenêtre
- Définissez votre propre taille de police racine pour contrôler la conversion px → rem
- Affiche la pente exacte en vw et l'ordonnée à l'origine en rem derrière la valeur
- Copiez la valeur clamp() brute, une déclaration font-size ou une classe Tailwind
- Préréglages pour le texte courant, les titres, la typo héro et l'espacement fluide
- Gère les rampes descendantes où la taille diminue quand la fenêtre s'agrandit
- S'exécute entièrement dans votre navigateur sans qu'aucune taille ne soit envoyée nulle part
Comment utiliser Calculateur CSS clamp
- Saisissez vos largeurs de fenêtre min et max en pixels
- Saisissez les tailles min et max que l'élément doit atteindre à ces largeurs
- Ajustez la taille de police racine si elle n'est pas la valeur par défaut de 16px
- Faites glisser le curseur d'aperçu pour vérifier la taille rendue sur toute la plage
- Copiez la valeur clamp() ou la déclaration CSS dans votre feuille de style
Exemple
Entrée
min viewport 320px, max viewport 1200px
min size 16px, max size 24px, root 16px
Sortie
font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);
16px à 320px passe à 24px à 1200px et reste plat en dehors de cette bande.
Erreurs courantes et dépannage
- Le texte ne dépasse jamais la taille min. — Vérifiez que la fenêtre min est plus petite que la fenêtre max — une plage inversée aplatit la rampe pour que le terme préféré ne l'emporte jamais entre les bornes.
- Les tailles semblent incorrectes après avoir changé la taille de police racine. — Les rem de clamp() sont relatifs à la racine. Si votre page définit html { font-size } à autre chose que 16px, faites correspondre le champ racine pour que la sortie en rem se résolve aux pixels attendus.
- La valeur grandit trop agressivement sur les très grands écrans. — Le terme du milieu continue de monter jusqu'à la fenêtre max. Baissez la largeur de fenêtre max ou la taille max pour que la rampe atteigne son plafond plus tôt et y reste bornée au-delà.
- clamp() est ignoré dans un navigateur ancien. — clamp() est largement pris en charge dans les navigateurs modernes. Pour des cibles très anciennes, fournissez d'abord une font-size statique en repli et laissez clamp() la remplacer là où c'est pris en charge.
Foire aux questions
- Comment un calculateur CSS clamp calcule-t-il la pente en vw ?
- Il trace une droite passant par vos deux points d'ancrage : pente = (tailleMax − tailleMin) / (fenêtreMax − fenêtreMin). Comme 100vw égale la largeur de la fenêtre, le coefficient vw dans la valeur est cette pente multipliée par 100, et l'ordonnée à l'origine en rem est ce qui reste quand la droite est prolongée vers une fenêtre de largeur nulle.
- Pourquoi le terme du milieu mélange-t-il rem et vw ?
- La valeur préférée est une droite : une partie fixe qui ne dépend pas de la largeur (l'ordonnée à l'origine en rem) plus une partie qui croît avec la fenêtre (la pente en vw). Mélanger les deux permet à la taille de varier en douceur entre votre min et votre max au lieu de sauter à un point de rupture.
- Dois-je utiliser px ou rem dans les bornes de clamp ?
- Les bornes en rem respectent le réglage de taille de police du navigateur de l'utilisateur, ce qui est meilleur pour l'accessibilité, donc cet outil produit du rem par défaut. Vous pouvez basculer l'affichage sur px, mais les bornes clamp en rem sont le choix le plus sûr pour dimensionner du texte.
- Puis-je utiliser la même valeur clamp() pour les marges et les espacements ?
- Oui. clamp() fonctionne pour toute longueur, donc la valeur s'applique au padding, à la marge, au gap et aux pistes de grille comme à font-size. Utilisez le préréglage d'espacement fluide comme point de départ et ajustez les tailles min et max.
- Quelle taille de police racine dois-je saisir ?
- Utilisez celle que votre page définit sur l'élément html — 16px est la valeur par défaut du navigateur et de l'outil. Si vous mettez la racine à l'échelle ailleurs, saisissez cette valeur pour que la sortie en rem corresponde aux pixels que vous voyez réellement.
- Les tailles que je tape sont-elles téléversées quelque part ?
- Non. Le calculateur CSS clamp s'exécute entièrement dans votre navigateur. Les largeurs de fenêtre et les tailles que vous saisissez ne servent qu'à calculer la valeur sur votre appareil et ne sont jamais envoyées à ArrayKit.
Outils associés
Tous les outils ArrayKit