Générateur CSS clamp()
Générez une taille fluide CSS clamp() (typographie responsive) entre deux largeurs d’écran.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Une taille qui suit l’écran
Indiquez la taille min et max et les largeurs d’écran correspondantes : l’outil calcule la valeur clamp() à coller dans votre CSS, avec un aperçu qui réagit à la largeur de la fenêtre.
-
Taille min / max
Par ex. 16 px à 24 px.
-
Écrans de référence
Par ex. 320 px à 1280 px.
-
Copiez le clamp()
Dans font-size, padding, etc.
Exemple : 16 → 24 px (320 → 1280 px)
| Donnée | Valeur |
|---|---|
| Taille min / max | 16 px / 24 px = 1rem / 1.5rem |
| Écrans | 320 px → 1280 px |
| Pente fluide | 0.833vw |
| Résultat | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
À 320 px la taille vaut 16 px, à 1280 px elle vaut 24 px, et elle varie linéairement entre. Calcul 100 % local.
Questions fréquentes
À quoi sert clamp() ?
La fonction CSS clamp(min, idéal, max) borne une valeur entre un minimum et un maximum, avec une valeur idéale qui s’adapte à la largeur de l’écran. C’est la façon moderne de faire une taille de police fluide sans media queries.
Comment la valeur idéale est-elle calculée ?
On trace une droite entre (largeur min, taille min) et (largeur max, taille max). La partie centrale combine une base fixe en rem et une pente en vw, par exemple 0.833rem + 0.833vw, bornée par les min/max en rem.
Pourquoi mélanger rem et vw ?
Le vw fait grandir la taille avec la largeur de la fenêtre (fluidité) ; le rem ajoute une base fixe pour que la pente ne parte pas de zéro. La combinaison donne une croissance linéaire et lisible, respectueuse du zoom utilisateur.
Faut-il garder min et max ?
Oui. Sans bornes, le texte deviendrait minuscule sur petit écran et énorme sur très grand écran. clamp() bloque la valeur en dehors de votre plage de largeurs de référence.