Calculateur de taille fluide
Fluid Size Calculator
Calcule une expression clamp() qui fait varier une taille en douceur entre deux largeurs de fenêtre.
Construit un `clamp()` qui fait varier une taille en douceur entre deux largeurs de fenêtre — l’expression de typographie fluide, l’arithmétique faite pour vous. Les deux extrémités sont en `rem`, et c’est cette partie-là qui décide si le résultat est accessible.
Ancres
L’expression
Pente
0,833vw
Ordonnée à l’origine
0,833rem
Plage
1,000–1,500rem
rem, et ce n’est pas une question de style. Un clamp en px ignore complètement la taille de police du navigateur du lecteur — un manquement à WCAG 1.4.4 que la personne qui l’a écrit ne connaîtra jamais, puisque ce n’est pas elle qui a réglé sa valeur par défaut sur 24px. Le coefficient vw reste une proportion de la fenêtre, et c’est pourquoi changer la taille racine au-dessus déplace les deux extrémités et laisse la pente tranquille.Ce que cela donne
| Fenêtre | Taille | |
|---|---|---|
| 320px | 16px | |
| 375px | 16.46px | |
| 480px | 17.33px | |
| 640px | 18.67px | |
| 768px | 19.73px | |
| 1024px | 21.87px | |
| 1280px | 24px | |
| 1440px | 24px(bornée) | |
| 1920px | 24px(bornée) |
Bon à savoir
- · Au-dessus de l’ancre haute, la taille est figée : élargir la fenêtre ne la change plus. Les deux ancres sont en rem, elle continue donc de suivre la taille de police choisie par le lecteur — la même expression écrite en px ne le ferait pas.
Vous en construisez toute une série ? Le générateur d’échelle typographique produit les tailles de palier à borner entre elles.
Comment s’en servir
Fixez les quatre ancres
La taille à votre plus petite fenêtre, la taille à votre plus grande, et les deux largeurs de fenêtre auxquelles elles s’appliquent. Tout le reste en découle.
Vérifiez le tableau des valeurs résolues
Il montre à quoi l’expression s’évalue sur un éventail de largeurs de fenêtre réelles, en marquant celles où c’est le plafond ou le plancher qui tient plutôt que la pente.
Copiez la déclaration
Un seul `font-size: clamp(...)`. La pente et l’ordonnée à l’origine sont montrées aussi, pour quand vous voulez comprendre l’expression plutôt que la coller.
Questions fréquentes
Pourquoi les unités sont-elles en `rem` et non en `px` ?
Parce qu’un clamp en `px` ignore complètement la taille de police choisie par la personne qui lit. Quelqu’un qui a réglé sa valeur par défaut à 24 px parce qu’il en a besoin reçoit quand même vos 16 px — c’est un échec au critère WCAG 1.4.4, et un échec que l’auteur ne vit jamais.
Les extrémités doivent-elles être mes points de rupture ?
Pas nécessairement. Le clamp gère tout ce qui se trouve entre les deux, donc les extrémités utiles sont le téléphone le plus étroit que vous prenez en charge et la largeur au-delà de laquelle vous ne voulez plus que le texte grandisse — souvent autour de 1200 à 1400 px plutôt que votre plus grand point de rupture.
Le zoom fonctionne-t-il encore ?
Le zoom de page, oui : il change la largeur de fenêtre et le clamp suit. C’est le zoom du texte seul que les ancres en `rem` protègent : la part en `vw` n’y répond pas, donc sans composante en `rem` le texte serait figé. C’est pour cela que l’expression mélange les deux.
Puis-je m’en servir aussi pour les marges intérieures et les écarts ?
Oui : l’expression n’est que de l’arithmétique d’unités et se moque de la propriété sur laquelle elle atterrit. La sortie dit `font-size` parce que c’est le cas courant ; changez la propriété et gardez la valeur.
À alimenter depuis
Générateur d’arrondis
Border Radius Generator
Façonne chaque coin séparément, syntaxe à deux valeurs pour le squircle comprise, et rend le CSS.
Constructeur de grille CSS
CSS Grid Builder
Dispose une grille visuellement avec des zones nommées et rend le CSS grid-template correspondant.
Bac à sable Flexbox
Flexbox Playground
Actionne chaque propriété flex sur un exemple vivant et montre le CSS ainsi que ce que chaque propriété a changé.
Calculateur de format d’image
Aspect Ratio Calculator
Trouve la dimension manquante pour un rapport visé et liste les tailles normalisées qui lui correspondent.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Constructeur de grille CSS
CSS Grid Builder
Dispose une grille visuellement avec des zones nommées et rend le CSS grid-template correspondant.
Générateur d’échelle typographique
Type Scale Generator
Construit une échelle modulaire de tailles de texte et d’espacements à partir d’une taille de base et d’un rapport, exportable en CSS ou en jetons.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.