Catégorie: Développement
Générateur de clamp CSS
Des tailles de police fluides sans media queries
Donnez une taille minimale et une maximale ainsi que les largeurs de viewport correspondantes, et obtenez la déclaration clamp() qui varie entre les deux, avec un tableau du rendu aux largeurs courantes.
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| Largeur du viewport | Taille rendue |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
Aperçu
Une typographie fluide reste lisible sur mobile et proportionnée sur ordinateur.
La déclaration est construite dans la page. Rien n'est envoyé.
Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.
À quoi sert cet outil
clamp() a remplacé la pile de media queries qui faisait autrefois sauter un titre entre quatre tailles. Le terme délicat est celui du milieu : il doit être la droite passant par vos deux points, soit une pente multipliée par le viewport plus une ordonnée, écrite comme une valeur vw ajoutée à une valeur en rem. Ce calcul est fait ici pour vous. Les deux bornes restent en rem afin qu'une personne ayant agrandi sa taille de texte par défaut obtienne toujours des caractères plus grands, et le tableau montre la taille réellement rendue à 360, 768, 1024, 1280 et 1600 pixels. La même valeur sert aux marges intérieures, aux gouttières et aux marges, pas seulement au texte.
Mode d'emploi
- Saisissez la plus petite taille et la largeur de viewport où elle s'applique.
- Saisissez la plus grande taille et la largeur où elle cesse de croître.
- Copiez la déclaration clamp() et vérifiez le tableau d'aperçu.
Confidentialité
Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.
Questions fréquentes
- Pourquoi les bornes sont-elles en rem plutôt qu'en px ?
- Une taille exprimée uniquement en unités de viewport ignore le réglage de taille de texte du navigateur, ce qui est un défaut d'accessibilité. Des bornes en rem suivent la préférence de chacun.
- Puis-je l'utiliser aussi pour les espacements ?
- Oui. La valeur est simplement une longueur : elle fonctionne pour padding, margin, gap, width et toute propriété qui en accepte une.
- Quelque chose est-il envoyé à un serveur ?
- Non. La déclaration est calculée dans la page à partir des nombres saisis, d'où sa mise à jour instantanée.