Comment utiliser : Calculateur de colliers de serrage
- Veuillez saisir les tailles minimale et maximale (en px ou en rem) ainsi que les largeurs de la fenêtre d'affichage à partir desquelles le redimensionnement doit commencer et s'arrêter.
- Copiez la
clamp()valeur — choisissez entre « rem » (recommandé pour l'accessibilité) ou « px ». - Faites glisser le curseur de la fenêtre d'affichage pour voir la taille exacte quelle que soit la largeur de l'écran, et consultez le calcul étape par étape ci-dessous.
- Générez une échelle complète de type « fluid » ou une échelle spatiale, puis copiez-la sous forme de propriétés CSS personnalisées.
Qu'est-ce que la fonction `clamp()` en CSS ?
clamp(MIN, PREFERRED, MAX) Elle renvoie la valeur souhaitée, sans jamais descendre en dessous de MIN ni dépasser MAX. Avec une valeur souhaitée qui s'adapte à la taille de la fenêtre d'affichage — comme 0.8239rem + 0.7512vw — vous obtenez des tailles de police et des espacements fluides qui s'adaptent en douceur entre un format mobile et un format bureau, sans avoir à multiplier les requêtes média. Cela fonctionne dans tous les navigateurs modernes.
La formule, étape par étape
Le dimensionnement fluide correspond à une ligne droite reliant deux points : (fenêtre d’affichage minimale, taille minimale) et (fenêtre d’affichage maximale, taille maximale). Pour 16 px à 375 px et 24 px à 1 440 px :
- Pente = (24 − 16) ÷ (1 440 − 375) = 0,007512 — la taille augmente de 0,0075 px par pixel de fenêtre d’affichage.
- Partie vw = pente × 100 =
0.7512vw, car 1 vw correspond à 1 % de la largeur de la fenêtre d’affichage. - Ordinée à l’origine = 16 − 0,007512 × 375 = 13,183 px =
0.8239remavec une racine de 16 px. - Résultat :
clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem). Pour une fenêtre d’affichage de 768 px, cela correspond à 13,183 + 0,007512 × 768 ≈ 18,95 px.
Pourquoi mélanger les unités « rem » et « vw » ?
Une taille composée uniquement de vw ignore le zoom du navigateur et la taille de police par défaut de l’utilisateur, ce qui peut entraîner un non-respect de la règle WCAG 1.4.4 (Redimensionnement du texte). Le fait de conserver une rem valeur intermédiaire, la valeur reste adaptative lorsque l’utilisateur zoome ou définit une police par défaut plus grande. En règle générale, si le maximum ne dépasse pas 2,5 fois le minimum, le texte peut toujours s’afficher avec un zoom à 200 % — le calculateur signale les plages qui dépassent cette limite.
Échelles de police et d’espacement fluides
Au lieu de calculer chaque titre séparément, définissez une échelle modulaire : chaque étape multiplie la base par un rapport. Un rapport plus faible sur mobile (par exemple 1,2, tierce mineure) et un rapport plus élevé sur ordinateur de bureau (par exemple 1,25, tierce majeure) permettent de conserver des titres percutants sur les grands écrans sans surcharger les téléphones — une approche popularisée par Utopia. L’échelle spatiale multiplie la même base (0,25×, 0,5×, 1×, 1,5×, 2×…) afin que les marges et les espacements s’adaptent progressivement à la longueur du texte.
Comment utiliser la fonction `clamp()` dans Webflow
- Directement dans le panneau Style : Webflow accepte les fonctions mathématiques CSS dans les champs de taille. Cliquez dans « Taille de la police », « Espacement intérieur » ou « Espacement extérieur », collez la
clamp(…)valeur et appuyez sur Entrée. - Sous forme de variables : créez une variable « Taille » pour chaque étape (par exemple « Étape 0 », « Espace M ») dans le panneau Variables, collez la valeur de clamp(), puis appliquez la variable aux polices et aux espacements dans toutes les classes — modifiez-la une seule fois, la mise à jour s’effectue partout.
- Via du code personnalisé : collez le
:root { … }bloc généré à l’intérieur d’une<style>balise dans Paramètres du site → Code personnalisé → Code d’en-tête, puis saisissezvar(--step-0)dans n’importe quel champ de taille. - Des espacements adaptatifs, tels que
clamp(2rem, …, 4rem)évitent que les sections ne paraissent trop grandes sur les tablettes — utilisez le module de démarrage rapide « Espacement ».
Vous souhaitez d’abord convertir vos spécifications de conception ? Le convertisseur PX en REM transforme les valeurs en pixels en rem.
Aussi recherché comme : calculateur tenant compte des liquides, taille de police « fluid root », css clamp, typographie fluide, balance à liquide, taille de police adaptative, vw rem, utopie.
Outils complémentaires : Calculateur de colliers de serrage
- Type Scale Generator — Pick a base font size and a ratio — Minor Third, Major Third, Perfect Fourth, Golden Ratio — and get a harmonious set of font sizes for headings and body text.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- Convertisseur d’unités — Convertissez les unités métriques, impériales et techniques dans dix catégories différentes, grâce à un convertisseur bidirectionnel et à un tableau regroupant toutes les unités en un seul coup d'œil.
Questions fréquentes
Quelles sont les dimensions minimales et maximales recommandées pour la zone d’affichage dans le cadre d’une typographie adaptative ?
La sortie de la fonction `clamp()` doit-elle utiliser « rem » ou « px » ?
La fonction `clamp()` peut-elle réduire la taille d’une valeur sur les écrans plus grands ?
clamp(), comme l'exige le CSS.La fonction `clamp()` fonctionne-t-elle dans Webflow ?
var().Pourquoi la taille de ma police « fluid » ne change-t-elle pas lorsque je redimensionne la fenêtre du navigateur ?
vw la largeur de la barre de défilement verticale est prise en compte sur les ordinateurs de bureau.