Générateur de clamp CSS fluide
Générez une valeur CSS clamp() qui fait varier en douceur une taille de police ou un espacement entre deux largeurs de fenêtre, en px ou rem.
- Fonctionne dans votre navigateur
- Aucun envoi
- Le résultat reste sur votre appareil
Confidentialité et limitesS’exécute dans votre navigateur. Rien n’est envoyé.
Le contenu des entrées reste dans cet onglet ; Refentra ne l’envoie ni ne le stocke. Les comptages agrégés facultatifs d’actions sont envoyés uniquement avec votre consentement à la mesure d’usage. Effacez l’espace après usage.
Profil pris en charge: Une unité, px ou rem ; 0≤min≤max, 0<début<fin. En rem, bornes de fenêtre en rem aussi.
Maximum 200 000 unités UTF-16 ; les parseurs peuvent limiter davantage. Worker : 15 secondes (regex 1,5 seconde).
Vérifier la saisie et le résultat
- Préparer et choisir l’opération
Choisissez px ou rem de façon cohérente, les tailles minimale et maximale, et les largeurs de fenêtre où l’interpolation fluide commence et se termine.
- Vérifier un exemple concret
Essayez cet exemple et comparez le résultat indiqué : min=16 max=32 start=320 end=1280 unit=px → clamp(16px, calc(10.666667px + 1.666667vw), 32px)
- Examiner avant de réutiliser la sortie
Vérifiez les deux largeurs de fenêtre extrêmes et des largeurs intermédiaires. En dehors de l’intervalle, clamp garde le minimum ou le maximum.
Réponses pour cette tâche
De quoi dépend rem ?
De la taille de police racine. Employez les unités de fenêtre et de taille de façon cohérente, et testez le zoom au lieu de supposer une racine fixe de 16px.
Que vérifier si la saisie échoue ?
Il faut 0 ≤ minimum ≤ maximum et 0 < fenêtre de départ < fenêtre de fin : deux largeurs de fenêtre égales ne définissent aucune pente.
Quelles sont les limites de cet outil ?
L’outil génère une taille fluide linéaire, pas une échelle typographique adaptative complète. Les retours à la ligne, le zoom et les réglages de police de l’utilisateur restent à tester.