Aller au contenu
TextArray1.41.0
Tout en local

Générateur CSS clamp()

Génère une valeur CSS clamp() fluide qui s'adapte en douceur entre deux largeurs de viewport.

Sortie
Outils connexes
Convertisseur d'unités CSSOutils de développement
Extracteur de variables de couleur CSSnouveauOutils de développement
Calculateur de rapport hauteur/largeurOutils de développement
différence de clé i18nOutils de développement
Convertisseur TOML en JSONOutils de développement
SQL vers JSONOutils de développement
Générateur CSS clamp()
La typographie fluide et l'espacement adaptatif permettent de mettre à l'échelle les valeurs en douceur au fur et à mesure que le viewport se redimensionne, au lieu de sauter entre des tailles fixes à quelques media queries. Cet outil construit cette valeur pour vous : entrez une taille minimale et maximale, ainsi que les largeurs de viewport où elles s'appliquent, et vous obtiendrez une fonction CSS clamp() avec une interpolation linéaire au milieu, prête à coller dans votre feuille de style.
La taille minimale et maximale définissent les deux extrémités de l'échelle ; la largeur de viewport minimale et maximale définissent où s'applique chaque extrémité — en dessous de la largeur minimale, la valeur reste à son plancher, au-dessus de la maximale elle reste à son plafond, et au milieu elle croît linéairement avec le viewport. L'option d'unité change la sortie entre px et rem, la taille de police racine contrôle la conversion px-vers-rem, et les décimales contrôlent la précision des nombres générés. Le format de sortie enveloppe le même clamp() comme une déclaration simple, une propriété CSS personnalisée, ou une classe de valeur arbitraire Tailwind, pour que vous puissiez la déposer directement dans votre base de code.
Activer la vérification d'accessibilité ajoute une note lorsque la configuration pourrait causer des problèmes : le dimensionnement en px ignore la préférence de taille de police du navigateur du lecteur, et un minimum trop petit reste difficile à lire même avant de commencer à augmenter. Ce sont tous deux des erreurs courantes dans les formules de typographie fluide écrites à la main, et l'outil les signale au lieu de les laisser passer en silence.
Tous les calculs sont effectués dans votre navigateur à mesure que vous ajustez les options — rien de ce que vous entrez n'est envoyé nulle part. Lorsque le résultat vous convient, copiez-le, téléchargez-le en tant que fichier .txt, ou envoyez-le à l'entrée d'un autre outil pour continuer à travailler dessus.
FAQ
Que fait réellement clamp() ?
clamp(min, preferred, max) choisit la valeur préférée mais ne la laisse jamais descendre en dessous de min ou dépasser max — ici la valeur préférée croît linéairement avec la largeur du viewport, de sorte que le résultat se met à l'échelle en douceur entre vos deux extrémités de taille.
Pourquoi choisir rem au lieu de px ?
Une taille basée sur rem s'adapte à la taille de police racine, elle respecte donc toujours un lecteur qui a modifié la taille de texte par défaut de son navigateur. Une taille basée sur px reste fixe indépendamment de cette préférence, c'est pourquoi la vérification d'accessibilité la signale.
À quoi sert la taille de police racine ?
C'est la valeur en px que 1rem représente sur la page que vous stylisez — 16 par défaut dans chaque navigateur à moins que vous ou une feuille de réinitialisation ne la changiez. L'outil l'utilise pour convertir vos tailles en px en valeurs rem précises.
Puis-je utiliser directement la sortie Tailwind dans un attribut class ?
Oui. C'est une classe de valeur arbitraire complète comme text-[clamp(1rem,0.8rem+1vw,2rem)] avec les espaces supprimés, ce qui est exactement la syntaxe attendue par Tailwind.
Mes données sont-elles envoyées quelque part ?
Non. Tous les calculs se font dans votre navigateur — les nombres que vous entrez ne quittent jamais votre appareil.