Générateur CSS clamp()
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);Outils externes associés
Certains liens sont des liens d'affiliation.
Outils associés
Créez une valeur CSS clamp() fluide qui s'adapte progressivement entre une taille minimale et maximale sur une plage de viewport — idéale pour la typographie et l'espacement adaptatifs. Entrez vos tailles, copiez le résultat et vérifiez l'aperçu en temps réel. Tout s'exécute dans votre navigateur.
Comment utiliser
- Définissez la taille minimale et maximale en pixels.
- Définissez la plage de viewport sur laquelle l'adaptation doit se faire.
- Copiez la valeur clamp() générée et vérifiez l'aperçu à différentes largeurs.
Comment ça fonctionne
L'outil trace une ligne droite entre deux points : votre taille minimale au viewport le plus petit et votre taille maximale au plus grand. Cette ligne devient la valeur préférée, exprimée avec un décalage rem plus une pente vw. clamp() la verrouille alors pour qu'elle ne descende jamais en dessous de votre minimum ni ne dépasse votre maximum, donnant une mise à l'échelle douce entre les deux points de rupture.
Fonctionnalités
Mise à l'échelle véritablement fluide
Les tailles s'interpolent progressivement entre les points de rupture au lieu de sauter avec les media queries.
Sortie rem + vw
La sortie utilise rem et vw pour respecter les paramètres de police de l'utilisateur et maintenir l'accessibilité.
Aperçu en temps réel
Consultez la taille en pixels calculée pour plusieurs largeurs de viewport courantes.
Racine personnalisée
Définissez la taille de police racine pour que les valeurs rem correspondent à votre projet.
Prêt à copier
Copiez une déclaration font-size complète directement dans votre CSS.
Quand l'utiliser
Typographie fluide
Adaptez les titres et le corps du texte progressivement du mobile au bureau.
Espacement et gouttières
Appliquez la même idée fluide aux paddings, marges et gouttières de grille.
Échelle typographique
Construisez une échelle typographique adaptive où chaque niveau s'adapte au viewport.
Cohérence
Remplacez des piles de media queries par un seul clamp() prévisible.
Remarques
- Le viewport maximal doit être supérieur au viewport minimal.
- Les valeurs utilisent rem basé sur la taille de police racine (16px par défaut).
- Des pentes très prononcées peuvent nuire à la lisibilité aux tailles intermédiaires.
- Tout s'exécute sur votre appareil ; rien n'est envoyé.
Questions fréquentes
- À quoi sert clamp() ?
- clamp(min, préféré, max) maintient une valeur entre un minimum et un maximum tout en permettant à la valeur préférée de s'adapter entre les deux — parfait pour le dimensionnement adaptatif.
- Pourquoi est-ce mieux que d'utiliser simplement vw ?
- Un vw simple continue de rétrécir ou de grandir sans limite. clamp() le délimite pour que le texte reste lisible sur les très petits et très grands écrans.
- Pourquoi rem plutôt que px ?
- rem respecte le paramètre de taille de police du navigateur de l'utilisateur, ce qui est meilleur pour l'accessibilité que les pixels fixes.
- La typographie fluide est-elle accessible ?
- Elle peut l'être, en maintenant un minimum raisonnable et en évitant les pentes extrêmes. L'utilisation de rem permet aussi aux utilisateurs de redimensionner le texte. Testez toujours avec le zoom et les paramètres de grand texte.
- Mes données sont-elles envoyées à un serveur ?
- Non. La valeur clamp() est générée entièrement dans votre navigateur.