Calculateur de CSS clamp()
Saisissez une taille pour petits et grands écrans et obtenez une valeur clamp() fluide qui s'adapte harmonieusement entre les deux — idéal pour les polices, le padding, les marges ou les espacements.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Le résultat conserve une composante en rem dans le terme central, de sorte que le texte s'agrandit toujours lorsque l'utilisateur effectue un zoom à 200 % — ce qu'une valeur basée uniquement sur le viewport ne permettrait pas.
Un texte fluide, parfaitement proportionné.
Le calcul s'effectue entièrement dans votre navigateur. Rien de ce que vous saisissez ici n'est téléversé vers BroBroGo.
FAQ
Comment le calculateur génère-t-il la valeur clamp()?
Vous définissez deux points de repère : une taille pour une petite largeur d'écran et une taille pour une grande largeur d'écran. Le calculateur trace une ligne droite entre ces deux points afin que la taille augmente de façon fluide à mesure que l'écran s'élargit, puis l'enveloppe dans une fonction clamp() pour s'assurer qu'elle ne descende jamais sous la limite minimale ni ne dépasse la limite maximale. Entre ces deux largeurs, la taille s'adapte de manière fluide; en dehors de ces limites, elle reste bloquée à la valeur extrême la plus proche.
Pourquoi le résultat est-il exprimé en rem et en vw plutôt qu'en pixels?
Les limites sont définies en rem et la partie centrale variable conserve une composante en rem, ce qui permet au texte de s'agrandir lorsqu'un utilisateur zoome ou augmente la taille de police par défaut de son navigateur — une valeur exprimée uniquement en pixels ou en unités de viewport (vw) pourrait bloquer ce comportement. Vous saisissez les dimensions en pixels pour plus de simplicité, et l'outil les convertit en rem en se basant sur la taille de police racine spécifiée.
Puis-je utiliser cet outil pour les espacements et pas seulement pour la taille de police?
Oui. La même valeur peut s'appliquer aux propriétés de padding, de marge, d'espacement (gap), de largeur ou de hauteur — partout où une dimension est requise. Basculez l'aperçu sur « Boîte » pour observer l'espacement varier plutôt que le texte. Si vos tailles minimale et maximale sont identiques, le résultat se simplifie en une dimension fixe, puisqu'il n'y a aucune variation à appliquer.
Tous les navigateurs prennent-ils en charge la fonction clamp()?
Oui — tous les navigateurs modernes prennent en charge clamp() depuis 2020, vous pouvez donc utiliser la valeur générée directement sans solution de repli. Si vous utilisez un maximum très élevé ou un taux de variation rapide, il est recommandé de faire un test rapide avec un zoom à 200 % pour vous assurer que le texte s'agrandit correctement pour les utilisateurs qui en ont besoin.