Calculateur de clamp() CSS

Ce calculateur de clamp CSS génère avec précision des valeurs clamp() fluides et adaptatives, sans avoir à les estimer.

Dernière mise à jour : 23 septembre 2026

Collez le résultat directement dans votre feuille de style. Il gère les calculs : pente, interception, mise à l'échelle de la fenêtre. Vous définissez les limites ; cela construit l’expression.

Ce qu'il fait :

• Génère clamp(min, preferred, max) avec coloration syntaxique complète

• Affiche une expression équivalente max()/min(), utile pour Safari 11.1 à 13.0, qui supportait min() et max() avant clamp()

• Convertit automatiquement entre px et rem, en respectant la taille de votre police racine.

• Affiche les valeurs exactes à chaque point d'arrêt majeur (320px → 1920px)

• Affiche un graphique de courbe de valeur en direct afin que vous puissiez voir la transition fluide visuellement

• Comprend 8 presets (Body, H1-H3, Caption, Gap S/M/L) pour des points de départ instantanés

Pourquoi c'est important :

La typographie fluide et l'espacement faits manuellement sont sujets à erreur. Une formule, enfermée. La calculatrice valide vos entrées, vous avertit des plages inversées et vous permet de copier la déclaration de propriété ou la valeur brute en un seul clic.

Fonctionne entièrement dans le navigateur. Aucune étape de construction, aucun compte.

Qu'est-ce que CSS Clamp ?

CSS clamp est une fonction mathématique CSS (EN) native qui contraint une valeur entre un minimum et un maximum définis, avec une valeur moyenne fluide qui évolue avec le viewport (EN).

Il prend trois arguments : clamp(MIN, PREFERRED, MAX).

Le navigateur choisit la valeur préférée jusqu'à ce qu'il atteigne l'une des limites. En dessous du minimum, le minimum gagne. Au-dessus du maximum, le maximum prend le relais.

Aucune requête média (EN) n'est nécessaire. Une ligne de CSS gère la gamme complète.

Comment fonctionne le calculateur de clamp CSS ?

Entrez vos valeurs min, max et les points d’arrêt de la vue. La calculatrice affiche instantanément une déclaration clamp() prête à être copiée.

La plupart des gens ne font pas cela à la main. Les maths impliquent l'interpolation linéaire et les calculs de pente de vw, et il est délicat d'avoir raison sans un outil.

Entrées dont la calculatrice a besoin

• Valeur minimale : la plus petite valeur que la propriété devrait avoir (px ou rem)

• Valeur maximale : la limite supérieure

• Largeur minimale de la fenêtre de visualisation : où commence la mise à l'échelle

• Largeur maximale de la fenêtre de visualisation : où l'échelle s'arrête

Ce que la calculatrice sort

Une déclaration clamp() complète avec l'argument du milieu basé sur vw.

Il montre également la pente calculée et l'intersection convertie en rem, ce qui est utile si vous construisez un système de conception et que vous avez besoin de tracer l'origine de chaque valeur.

Les mathématiques derrière la sortie

La calculatrice utilise une formule d'interpolation linéaire pour trouver deux choses : la pente (en vw) et l'origine (en rem).

Pente = (valeurmax − valeurmin) / (portéemax − portéemin)

Cette pente devient la partie vw de l'argument préféré. L'intersection déplace la ligne de sorte qu'elle passe à travers vos points min et max aux largeurs de vue correctes.

Avec les valeurs par défaut (16px à 24px entre 320px et 1440px), la pente est de 8 ÷ 1120 = 0.00714, ou 0.7143vw, et l'intersection est de 16 − 0.00714 × 320 = 13.71px (0.8571rem). La sortie est clamp(1rem, 0.7143vw + 0.8571rem, 1.5rem).

Qu'est-ce qu'une calculatrice de pince CSS ?

Un calculateur de clamp CSS est un utilitaire basé sur un navigateur qui convertit une taille minimale, une taille maximale et deux largeurs de fenêtre en une seule déclaration clamp() prête à être collée.

Il existe pour supprimer les calculs manuels derrière le dimensionnement fluide dans CSS (EN), le langage qui contrôle la façon dont le texte et l'espacement sont rendus sur les appareils.

L'outil lui-même ne fait partie d'aucun navigateur ou spécification. Il se trouve au-dessus d'une fonction native qui est déjà livré dans chaque moteur de rendu moderne.

Deux choses distinctes :

• La calculatrice : une page avec des champs d'entrée et une chaîne de sortie générée
• La fonction clamp() : la syntaxe CSS que la calculatrice écrit pour vous

Des outils comme Utopia.fyi ont poussé cela plus loin et génèrent une échelle complète de type fluide au lieu d'une valeur isolée.

Tapez une plage de taille de police dans l'un de ces outils et le CSS fonctionnel revient en quelques secondes, aucune mathématique de pente requise à la main.

Syntaxe et paramètres requis de la fonction CSS Clamp

La fonction clamp() prend exactement trois arguments séparés par des virgules, dans un ordre fixe : minimum, préféré, maximum.

• Valeur minimale : le plancher, utilisé chaque fois que la valeur préférée tomberait en dessous
• Valeur préférée : la valeur que le navigateur essaie d'utiliser, généralement une expression basée sur une fenêtre de visualisation
• Valeur maximale : le plafond, utilisé chaque fois que la valeur préférée grimperait au-dessus

Chaque argument peut être une longueur, un pourcentage, ou une autre fonction mathématique telle que calc(), min(), ou max().

Définir le minimum plus élevé que le maximum est une erreur de création courante. Selon la spécification, le minimum gagne et le maximum est ignoré, ce qui ressemble à une fonction brisée alors que le vrai problème est l'ordre des arguments.

Une fois générée, la chaîne de caractères tombe directement dans une valeur de propriété de la même manière que n'importe quelle autre taille, par exemple font-size : clamp(1rem, 2.5vw, 2rem) ;

Comment la formule Clamp calcule la valeur préférée

La valeur préférée dans clamp() est presque toujours un petit problème d'interpolation linéaire, deux points reliés par une ligne droite.

Une calculatrice l'exécute automatiquement en utilisant les deux largeurs de viewport (EN) fournies, de sorte que personne n'a à calculer la pente à la main à chaque fois qu'une conception change.

Calculer la pente entre le minimum et le maximum

La pente est le taux de variation entre la plus petite taille pour la plus petite largeur de fenêtre et la plus grande taille pour la plus grande largeur de fenêtre.

Les intrants nécessaires :

• Taille de police minimale, à la largeur minimale de la fenêtre d'affichage
• Taille de police maximale, à la largeur maximale de la fenêtre d'affichage
• Largeur minimale de la fenêtre
• Largeur maximale de la fenêtre

Soustrayez les deux tailles, soustrayez les deux largeurs, puis divisez le premier résultat par le second. Ce nombre devient le multiplicateur attaché à l'unité de la fenêtre de visualisation dans la déclaration finale.

Convertir la pente en une expression calc()

La valeur de la pente n'est jamais seule. Il est multiplié par une unité de fenêtre de visualisation et ajouté à un rem offset fixe.

Ce décalage fixe est l'intersection y, la valeur que la ligne atteindrait à une largeur de vue nulle, même si aucun navigateur réel ne rend à cette largeur.

Un résultat typique est calc(1rem + 1.5vw), la moitié fluide de la déclaration clamp().

Les navigateurs résolvent cette expression à chaque redimensionnement plutôt qu'une fois au chargement de la page, ce qui explique pourquoi le texte continue de se mettre à l'échelle lorsque la fenêtre se redimensionne.

La calculatrice de pinces CSS prend en charge les unités suivantes : px, rem, em et vw

La plupart des calculatrices acceptent px comme entrée et le convertissent silencieusement en rem avant d'exécuter la formule, car rem est ce qui respecte réellement les paramètres du navigateur d'un utilisateur.

Firefox prend en charge clamp() depuis la version 75, publiée en avril 2020 (MDN (EN)), et tous les moteurs principaux traitent maintenant ces quatre unités de la même manière dans la fonction.

Pourquoi rem est l'unité recommandée pour la taille de la police

rem est relative à la taille de police racine, la taille de base définie sur l'élément html, généralement 16px par défaut.

Modifiez cette taille de racine via un paramètre du navigateur et chaque valeur de serrage basée sur rem évolue automatiquement avec elle.

Ce que px fait différemment :

• px reste fixe peu importe ce que l'utilisateur change
• em se compose de la taille de police d'un parent, ce qui devient compliqué à l'intérieur des composants imbriqués

La différence entre pixel et rem (EN) est la plus importante à cet endroit précis, puisqu'une fonction clamp() construite sur px exclut silencieusement une page de ce comportement de mise à l'échelle.

Ce que vw contribue à la partie fluide de la formule

Référence rapide :

• 1vw équivaut à 1% de la largeur de la fenêtre
• 100vw équivaut à la pleine largeur de la fenêtre du navigateur

vw lie une valeur à cette largeur de fenêtre, ce qui donne à clamp() sa mise à l'échelle douce et non échelonnée.

Sans elle, la valeur préférée serait juste un autre nombre fixe, et la partie fluide de la formule disparaît complètement.

Les calculatrices construites autour des unités basées sur les fenêtres de visualisation de CSS (EN) gèrent cette conversion afin que personne n'ait à se souvenir des pourcentages à la main.

Clamp() Comparé à calc(), min() et max()

clamp() n'est pas vraiment une quatrième fonction, mais un raccourci pour les trois autres fonctions qui travaillent ensemble.

MDN documente directement la relation : clamp(MIN, VAL, MAX) se résout en max(MIN, min(VAL, MAX)), de sorte que le navigateur exécute une petite comparaison imbriquée chaque fois que la valeur est calculée.

Utilisez calc() seule quand rien n'a besoin d'être capped. Ajouter une limite là où aucune n'est nécessaire ne fait qu'ajouter de la complexité pour rien.

Utilisez min() ou max() quand un seul côté de la plage est important, une largeur maximale sur une image, par exemple, sans plancher requis.

Quand utiliser Clamp() au lieu de Media Queries

Une poignée de points d'arrêt fixes arrêtent de couvrir rapidement les largeurs réelles des appareils. Les téléphones à eux seuls sont maintenant livrés dans des dizaines de tailles de fenêtres différentes.

Chaque fois qu'une nouvelle largeur se situe entre deux points d'arrêt, quelqu'un doit ajouter une autre requête multimédia (EN) et la tester, ce qui est exactement la suppression des coûts de maintenance clamp().

Lorsque chaque approche gagne :

• Clamp() gagne pour mettre à l'échelle une seule valeur en douceur : taille de police, remplissage, une largeur maximale
• Les requêtes média gagnent toujours en matière de restructuration de la mise en page : passer d'une grille d'une colonne à trois, masquer une barre latérale
• Combiner les deux est normal en production : clamp() pour l'échelle, les requêtes de médias pour les déplacements structurels

Le tutoriel de Andy Bell sur Piccalil.li construit un système de type entier à partir de clamp() et des propriétés personnalisées CSS, en sautant complètement la taille de police basée sur les points d'arrêt.

Les deux approches ne s’excluent pas mutuellement au sein d’une même feuille de style. La plupart des sites de production s'appuient toujours sur des modèles de responsive design (EN) avec des points d'arrêt pour les changements de disposition, tout en laissant clamp() gérer tout ce qui évolue continuellement entre les deux.

rem ou px : Choix des unités pour les valeurs de pince accessibles

rem est la valeur par défaut la plus sûre pour les valeurs clamp() liées au texte, car elle répond au paramètre de taille de police du navigateur d'un utilisateur, contrairement à px.

Web Content Accessibility Guidelines, Success Criterion 1.4.4, exige que le texte reste lisible et fonctionnel à 200% de zoom sans perte de contenu (W3C, WCAG 2.1 (EN)).

La documentation de clamp() de MDN reflète cette exigence directement, recommandant que la limite maximale soit au moins deux fois la limite minimale chaque fois que clamp() contrôle la taille de la police.

Dans l'enquête 2018 de WebAIM sur les utilisateurs malvoyants (EN), 44,0% des répondants ont déclaré utiliser les commandes de zoom du navigateur et 36,7% ont utilisé spécifiquement les paramètres de taille du texte du navigateur, deux mécanismes qui se comportent différemment selon l'unité choisie.

Le choix entre les deux unités est également une question de conformité accessibilité web (EN), pas seulement de préférence visuelle.

rem : Avantages et inconvénients des valeurs de serrage

Avantages :

• S'adapte à la taille du texte du navigateur de l'utilisateur
• Correspond aux attentes de redimensionnement du texte du WCAG dès la sortie de la boîte
• Conserve un rapport cohérent avec la taille de police racine sur toute la page

Cons :

• Nécessite de vérifier que la taille de la police racine n'a pas été réinitialisée par une réinitialisation CSS
• Un peu moins intuitif pour les designers habitués à penser en pixels

La plupart des directives sur la typographie accessible (EN) se fixent sur rem comme unité par défaut pour cette raison précise.

px : Avantages et inconvénients des valeurs de serrage

Avantages :

• Sortie prévisible pixel par pixel sur tous les navigateurs
• Correspondance plus facile avec un fichier de conception qui spécifie des valeurs de pixels exactes

Cons :

• Ignore entièrement le paramètre de taille de texte du navigateur d'un utilisateur
• Peut échouer à l'exigence de redimensionnement de 200% du WCAG par lui-même
• N'offre aucun réel avantage par rapport à rem une fois que la taille de police racine est laissée à sa valeur par défaut

Réservez les valeurs de clamp() basées sur les px pour les propriétés non textuelles, une largeur de bordure ou une taille d'icône fixe, où l'échelle d'accessibilité n'a jamais été l'objectif.

Prise en charge du navigateur pour la fonction Clamp

clamp() fonctionne dans tous les navigateurs qui reçoivent encore des mises à jour, et ce depuis des années.

Can I Use (EN) place le support mondial des navigateurs à 96.25% en août 2026, combinant la part d'utilisation des ordinateurs de bureau et des mobiles de StatCounter GlobalStats.

Chiffres clés :

• Support mondial : 96,25% de l'utilisation du navigateur suivi (Can I Use, StatCounter GlobalStats, août 2026)
• Statut de référence : disponible dans tous les navigateurs depuis juillet 2020, largement disponible depuis janvier 2023 (projet web-features, cité via MDN)
• Chrome : pris en charge à partir de la version 79, publiée en décembre 2019 (peux-je utiliser)
• Safari : pris en charge à partir de la version 13.1, publiée en mars 2020 (peux-je utiliser)

Edge a été pris en charge un mois plus tard avec la version 79 en janvier 2020, sa première version sur le même moteur Blink que Chrome.

L’écart restant se situe presque entièrement avec les anciennes installations d’Android WebView et un bassin de plus en plus restreint de navigateurs d’entreprise encore verrouillés aux versions antérieures à 2020.

Cet écart est exactement ce dont la planification de la compatibilité entre les navigateurs (EN) doit tenir compte sur tout projet supportant encore ces environnements.

Calculer une valeur de pince à fluide étape par étape

Une calculatrice automatise cela, mais l'exécuter manuellement une fois rend la sortie plus facile à faire confiance et à déboguer plus tard.

1. Choisissez la taille de police minimale et la largeur de la fenêtre à laquelle elle s'applique
2. Choisissez la taille maximale de la police et la largeur de la fenêtre qu'il s'applique à
3. Soustraire les deux tailles, soustraire les deux largeurs, puis diviser le premier résultat par le second pour obtenir la pente
4. Multipliez la pente par 100 pour la convertir en coefficient vw
5. Résoudre l'ordonnée à l'origine : taille minimale moins pente multipliée par la largeur minimale
6. Assemblez les trois arguments en clamp(min, coefficient vw + intercept, max)

Vérifiez le résultat aux deux extrémités de la gamme avant de l'expédier. La valeur doit se situer exactement sur le minimum à la plus petite largeur et exactement sur le maximum à la plus grande.

Une erreur courante ici consiste à écrire le coefficient sous forme de pourcentage. Il a besoin de l'unité vw, comme dans 0.7143vw, puisqu'un pourcentage à l'intérieur de la taille de la police se résout par rapport à la taille de la police parent, et non à la fenêtre d'affichage.

Outils qui génèrent automatiquement les valeurs de serrage

Une calculatrice sauve l'arithmétique. Ce qui sépare un outil d'un autre est ce qui se passe après la génération du CSS.

Le Fluid Type Scale Calculator de Aleksandr Hovhannisyan génère un ensemble complet de variables de taille de police nommées au lieu d'une valeur isolée, prêt à être déposé dans un système de conception existant.

Les équipes qui supportent encore d'anciennes versions de navigateurs ajoutent parfois postcss-clamp, un plugin PostCSS qui réécrit clamp() en une combinaison min()/max() au moment de la compilation plutôt qu'au moment de l'exécution. Cela n'aide que les navigateurs qui ont livré min() et max() avant clamp(), principalement Safari 11.1 à 13.0.

Sass n'a jamais eu de mathématiques fluides natives, donc tout équivalent était toujours un mixin écrit à la main faisant le même calcul de pente que la calculatrice fait automatiquement.

Lorsque Clamp() ne fonctionne pas ou doit être évité

clamp() n'est pas toujours le bon outil. Quelques situations appellent quelque chose de complètement différent.

Là où il manque :

• Projets hérités prenant toujours en charge Internet Explorer, qui n'ont jamais reçu clamp() quelle que soit la version (Puis-je utiliser)
• Mises en page qui nécessitent un saut dur à un point d'arrêt spécifique plutôt qu'une échelle lisse, une barre latérale qui devrait disparaître entièrement en dessous de 768px, par exemple
• Les valeurs où le minimum et le maximum sont assez proches les uns des autres pour qu'une taille fixe semble identique, l'ajout de clamp() ajoute de la complexité sans résultat visible
• Propriétés où un fichier de conception spécifie des valeurs de pixels exactes sans tolérance pour l’échelle, comme une marque de logo de taille fixe

L'inversion de l'ordre des arguments est l'erreur de création la plus courante, définissant le maximum là où appartient le minimum.

La déclaration ne sera pas erronée. Il va juste retourner silencieusement le mauvais nombre.

Le mélange d'unités de longueur telles que px, rem et vw entre les trois arguments est acceptable. Le mélange de types incompatibles, comme une longueur avec un angle ou un nombre sans unité, rend la déclaration entière invalide, et le navigateur l'abandonne sans erreur.

Les projets qui ne peuvent pas abandonner complètement la prise en charge héritée peuvent associer une valeur fixe simple déclarée en premier avec la ligne clamp() après, afin que les navigateurs qui ne comprennent pas clamp() conservent la taille fixe.

Au-delà de la typographie : espacement, largeur et mise en page avec Clamp()

La taille de la police est l'utilisation la plus courante de clamp(), mais la même logique à trois arguments s'applique à toute propriété CSS basée sur la longueur.

Espacement des fluides avec pince()

Les valeurs de remplissage et de marge sont mises à l'échelle exactement de la même manière que la taille de police, avec un minimum sur les petits écrans, un maximum sur les grands et une valeur fluide basée sur vw entre les deux.

Les candidats communs :

• Espacement intérieur de section, de sorte que le contenu n'encombre pas les bords sur les petits écrans ou ne flotte pas maladroitement sur les grands
• Valeurs d’écart à l’intérieur d’une disposition Flex ou d’une grille
• Marge entre les titres empilés et les paragraphes

Le calcul de la pente est identique à celui utilisé pour la taille de la police. Seuls le nom de la propriété et les nombres min/max changent.

Largeurs de récipient de fluide avec pince()

La largeur maximale d'un conteneur peut utiliser clamp() pour empêcher le contenu de s'étirer trop sur les grands moniteurs tout en remplissant les petits écrans.

Un modèle typique est width : clamp(320px, 90%, 1200px) ;, ce qui permet de maintenir le conteneur fluide entre un sol dur et le plafond.

Cela se chevauche directement avec la façon dont un système de grille (EN) définit ses limites extérieures, puisque les deux résolvent le même problème de garder le contenu lisible à des largeurs extrêmes.

Les systèmes de conception fluide tels que Utopia fournissent leurs jetons d'espacement et de largeur sous forme d'expressions clamp(), pas seulement leurs tailles de police.

Questions fréquentes : Calculateur de clamp() CSS

Est-ce qu'une calculatrice de pince CSS est la même chose que la fonction Clamp() ?

Non. Un calculateur de clamp CSS est un outil front-end qui affiche la syntaxe. clamp() elle-même est la fonction CSS native, faisant partie du module CSS Values and Units, que les navigateurs exécutent. La calculatrice n'est jamais envoyée en production, seulement la déclaration qu'elle génère.

Clamp() peut-il être imbriqué à l'intérieur de calc() ?

Oui. clamp() peut se trouver à l'intérieur d'une expression calc(), et calc() peut aussi se trouver à l'intérieur des arguments de clamp(). L'imbrication est courante lorsque l'on combine une valeur fluide vw avec un rem offset fixe à l'intérieur de l'argument de valeur préférée de la fonction.

Clamp() fonctionne-t-il avec les propriétés personnalisées CSS ?

Oui, oui. N'importe quel argument de clamp() peut faire référence à une propriété CSS personnalisée au lieu d'une valeur littérale. Les systèmes de conception stockent souvent les valeurs minimale, préférée et maximale en tant que variables, puis appliquent le même modèle clamp() à plusieurs composants sans répéter les nombres.

Clamp() peut-elle produire une valeur négative ?

Oui, si les trois arguments se résolvent en nombres négatifs, clamp() retourne un résultat négatif. Cela apparaît dans les marges négatives utilisées pour les mises en page de fond perdu. Les arguments positifs et négatifs mixtes se résolvent toujours normalement, suivant la même logique minimum, préférée, maximale.

Avez-vous besoin d'un outil de construction ou d'un préprocesseur pour utiliser Clamp() ?

Non, clamp() est un CSS natif et ne nécessite aucune étape Sass, PostCSS ou bundler pour s'exécuter dans un navigateur. Un préprocesseur ne devient utile que pour générer des échelles fluides entières, ou pour une solution de repli sur le petit groupe d'anciens navigateurs dépourvus de clamp().

Comment tester une valeur Clamp() sur différentes tailles d'écran ?

Redimensionnez la fenêtre du navigateur manuellement ou utilisez le mode réactif de browser DevTools pour faire glisser la largeur de la fenêtre. Vérifiez que la valeur se situe au minimum en dessous du plus petit point d'arrêt et au maximum au-dessus du plus grand, avec une mise à l'échelle en douceur entre les deux.

Que devriez-vous vérifier d'abord lorsque la sortie d'une calculatrice de pince CSS semble incorrecte ?

La sortie d'un calculateur de serrage CSS semble erronée pour l'une des trois raisons suivantes presque à chaque fois : l'ordre des arguments inversé, une largeur de fenêtre en dehors de la plage testée ou une valeur px restante qui n'a jamais été convertie en rem.

• Confirmer l'ordre des arguments : minimum, préféré, maximum
• Testez les deux extrémités de la fenêtre d'affichage, pas seulement celle du milieu
• Vérifiez que les valeurs min et max utilisent rem, pas px, lorsque la valeur contrôle la taille de la police

Le support global pour clamp() est de 96,25% (Puis-je utiliser), mais le seuil de redimensionnement de 200% du WCAG est une barre séparée que le support quasi universel n'efface pas automatiquement.

L'acceptation de clamp() échange le contrôle précis à n'importe quel point d'arrêt pour une mise à l'échelle qui ne saute jamais.

Une seule valeur de fluide reste rarement isolée. La plupart des projets l'étendent à une échelle responsive typography (EN) complète avec des étapes nommées au lieu de déclarations ponctuelles.