Générateur de clamp() CSS - Typographie et Espacements Fluides
Générateur de clamp() CSS
Des tailles de police fluides entre deux largeurs d'écran
Fluide sans Media Queries
Une ligne de CSS remplace une série de règles par point de rupture.
Compatible avec le Zoom
Utilise rem plus vw et avertit si l'écart risque d'empêcher le texte d'atteindre 200 % de zoom.
Aperçu en Direct
Faites glisser le curseur de fenêtre pour voir la taille évoluer, avec une table des largeurs courantes.
Privé
Tout s'exécute dans votre navigateur ; rien de ce que vous collez n'est envoyé.
Construction de la Valeur clamp()
clamp(MIN, PRÉFÉRÉ, MAX) utilise la valeur préférée sans jamais descendre sous MIN ni dépasser MAX. Pour une taille qui croît linéairement de 16px avec une fenêtre de 360px à 24px avec 1280px, la pente vaut (24 − 16) / (1280 − 360) = 0,8696px par px de largeur, soit 0,8696vw, et la droite coupe la largeur nulle à 12,87px = 0,8043rem. Le résultat est clamp(1rem, 0.8043rem + 0.8696vw, 1.5rem).
Garder une partie en rem dans la valeur préférée compte pour l'accessibilité : les unités vw ignorent le zoom du navigateur, donc un texte en vw seul ne grandit pas quand on zoome. En règle générale, gardez la taille maximale sous 2,5 fois la minimale. La même technique vaut pour les espacements, les gouttières et les marges internes : changez le nom de la propriété et les tailles.
Points Clés
- rem + vw: Mélanger les unités préserve le zoom.
- Rapport sous 2,5: Des écarts plus grands peuvent empêcher le zoom à 200 %.
- Pas seulement les polices: Utilisez-le aussi pour les marges et gouttières.