À propos de cet outil
Ce générateur associe une taille minimale, une valeur préférée dépendant de la fenêtre et une taille maximale dans CSS clamp(). L'aperçu du texte et le CSS se mettent à jour immédiatement.
Mode d'emploi
- Choisissez le mode de génération, puis renseignez les tailles et leurs unités.
- Vérifiez que le minimum ne dépasse pas le maximum.
- Consultez le CSS et l'aperçu. Le mode fluide exige également deux largeurs de fenêtre croissantes.
- Copiez le CSS, puis vérifiez le résultat à différentes largeurs dans votre projet.
Exemples
- clamp(16px, 2vw, 32px) maintient la taille de police entre 16 et 32px.
- Avec des tailles de 16 à 32px et une fenêtre de 320 à 1200px, la formule fluide donne 16px et 32px aux deux extrémités.
- En dehors de cet intervalle de largeurs, la taille reste à la limite minimale ou maximale.
font-size: clamp(16px, 2vw, 32px);
/* 16px at 320px viewport; 32px at 1200px viewport */
font-size: clamp(16px, calc(10.181818px + 1.818182vw), 32px);Fonctionnement et explications CSS
clamp(min, preferred, max) utilise la valeur préférée en la maintenant entre les deux limites. En mode fluide, slope = (maxSize − minSize) / (maxViewport − minViewport), puis intercept = minSize − slope × minViewport. La valeur préférée est calc(intercept px + slope × 100vw).
Utilisations courantes
- Créer des titres adaptatifs avec des limites de taille.
- Relier deux tailles de police par interpolation linéaire.
- Réduire le nombre de requêtes média consacrées uniquement à la taille du texte.
Confidentialité
La saisie, les calculs, la génération CSS et les aperçus sont entièrement traités dans votre navigateur. Aucun contenu n'est envoyé à un serveur. Aucun backend, base de données, API en ligne ou CDN tiers n'est utilisé, et vos données ne sont pas enregistrées automatiquement.
FAQ
Qu'est-ce que CSS clamp() ?
C'est une fonction mathématique CSS qui encadre une valeur préférée par une limite inférieure et une limite supérieure.
Que représentent les trois valeurs ?
Dans l'ordre : minimum, valeur préférée et maximum. L'outil vérifie les tailles et les unités et refuse les limites inversées.
Pourquoi l'utiliser pour les polices adaptatives ?
Une valeur préférée en vw suit la largeur de la fenêtre, tandis que les limites empêchent le texte de devenir trop petit ou trop grand.
Pourquoi le mode fluide exige-t-il deux largeurs différentes ?
Ces largeurs définissent l'intervalle d'interpolation. Le maximum doit dépasser le minimum pour éviter une division par zéro ou un intervalle inversé.
Quels navigateurs prennent en charge clamp() ?
Les principaux navigateurs modernes le prennent largement en charge. Pour les navigateurs anciens, vous pouvez placer une taille fixe avant la déclaration clamp() comme solution de repli.