⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Calculateur CSS Clamp()

Calculez une véritable valeur CSS clamp() fluide à partir d'une taille min et d'une taille max sur deux largeurs de viewport, avec la pente et l'intersection détaillées pas à pas et un aperçu de redimensionnement en direct.

🔒 Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.

Traitement en cours... 0%

Résultat

CSS clamp(MIN, PREFERRED, MAX) permet à une seule déclaration de remplacer tout un ensemble de media queries : la valeur reste à MIN en dessous du plus petit viewport, à MAX au-dessus du plus grand, et s'adapte progressivement entre les deux. La difficulté réside dans le terme PREFERRED — une expression relative au viewport telle que 0,833rem + 0,833vw — que personne ne souhaite calculer manuellement. Ce calculateur le calcule pour de bon à partir de quatre nombres : une taille minimum, une taille maximum, et la largeur de viewport à laquelle chacune s'applique.

Chaque nombre intermédiaire est affiché, pas seulement la ligne finale : la pente (combien d'unités de taille la valeur gagne par pixel de viewport), cette même pente exprimée en coefficient vw, et l'intersection avec l'axe des ordonnées — la constante ajoutée au terme vw pour que la droite passe exactement par les deux points que vous avez spécifiés. Toute personne ayant déjà collé une valeur clamp() depuis un tutoriel sans la comprendre peut voir, et vérifier, le calcul réel ici.

Un curseur de largeur de viewport pilote un aperçu en direct, de sorte que la mise à l'échelle fluide soit visible, pas seulement calculée : faites-le glisser entre les points d'arrêt min et max et observez le texte d'exemple se redimensionner exactement comme il le ferait lors du redimensionnement d'une véritable fenêtre de navigateur. La ligne de sortie et le détail se mettent à jour à chaque frappe — ceci s'associe naturellement au convertisseur px vers rem lorsque la taille de police de base elle-même doit également être convertie.

Passez en mode échelle typographique pour obtenir un système de typographie fluide complet en une étape : saisissez une taille de base et un ratio modulaire (de 1,125 à 1,5) et obtenez six tailles — small, base, h4, h3, h2 et h1 — chacune calculée comme sa propre ligne clamp() entre une progression mobile plus douce et le ratio de bureau complet, prêtes à copier sous la forme d'un bloc de propriétés CSS personnalisées.

Vous appréciez cet outil ? Vous trouvez ce produit utile ? Vous y voyez du potentiel et souhaitez le soutenir ?

🛡️
Exécuté dans le navigateur

Vos fichiers et données ne quittent jamais cet appareil. Le traitement est entièrement hors connexion. 100 % sécurisé.

Formats acceptés et règles

  • Mathématiques de la typographie fluide réelles : la pente, le coefficient vw et l'intersection avec l'axe des ordonnées sont affichés explicitement, au-delà de la simple ligne clamp() finale.
  • Aperçu en direct : faites glisser le curseur de largeur de viewport pour voir le texte d'exemple se redimensionner exactement comme il le ferait lors du redimensionnement d'une véritable fenêtre de navigateur.
  • Mode échelle typographique : une taille de base et un ratio de 1,125 à 1,5 génèrent six paliers clamp() fluides — small, base, h4, h3, h2, h1 — sous forme de CSS prêt à copier.

Principaux avantages

✓ La ligne clamp(), les valeurs de pente et d'intersection, et l'aperçu en direct se mettent à jour à chaque frappe — pas besoin de cliquer sur un bouton.
✓ Un curseur de largeur de viewport pilote un aperçu en direct, vous permettant de constater la mise à l'échelle fluide exacte entre les points d'arrêt minimum et maximum, au-delà d'une simple formule.
✓ Un mode « échelle typographique » dédié transforme une taille de base et un ratio en une échelle fluide de titres sur 6 paliers, prête à l'emploi sous forme d'un bloc de propriétés CSS personnalisées.

Cas d'utilisation

  • • Transformez une taille de police min/max et une plage de viewport en une ligne clamp() complète — pente, coefficient vw et point d’intersection inclus — au lieu de l’estimer à partir d’un tutoriel.
  • • Faites glisser un curseur de largeur de viewport pour prévisualiser un titre ou un corps de texte fluide se redimensionnant exactement comme il le ferait dans une vraie fenêtre de navigateur, avant de l’intégrer dans une feuille de style.
  • • Générez une échelle typographique fluide complète en 6 étapes (de small à h1) à partir d’une taille de base et d’un ratio, à copier en bloc sous forme de propriétés personnalisées CSS prêtes à l’emploi.
  • • Créez une valeur clamp() fluide pour les espacements (margin, padding, gap) plutôt que pour la taille de police — la même formule pente/intersection s’applique à n’importe quelle propriété CSS.