Calculatrice clamp() pour police fluide

Calculatrice clamp() pour police fluide: à quoi ça sert

Avec clamp(), le texte grandit avec la largeur de l’écran sans avoir besoin de plusieurs media queries : petit sur mobile, grand sur ordinateur, avec une transition progressive entre les deux.

La calculatrice établit l’équation de la droite entre la taille minimale et la taille maximale aux largeurs d’écran que vous choisissez et renvoie la valeur en rem, qui respecte la police configurée par la personne. Elle affiche la taille à chaque largeur courante et vous avertit lorsque le maximum dépasse 2,5 fois le minimum, seuil à partir duquel le zoom à 200 % exigé par WCAG 1.4.4 peut ne plus fonctionner.

Mode d’emploi

1. Indiquez les tailles minimale et maximale en px.
2. Choisissez entre quelles largeurs d’écran elle grandit.
3. Copiez le clamp() prêt à l’emploi.

Quand l’utiliser

• Titres qui s’adaptent au mobile et à l’ordinateur.
• Espacements fluides entre les sections.
• Échelle typographique sans media queries.

Questions fréquentes

Comment fonctionne clamp() ?

clamp(minimum, préféré, maximum) utilise la valeur préférée tant qu’elle reste entre les bornes. La valeur préférée est une droite, une valeur en rem additionnée d’une fraction de vw, qui grandit avec la largeur de l’écran : sur mobile elle reste au minimum et sur ordinateur elle atteint le maximum.

Pourquoi utiliser rem et non px ?

rem suit la taille de police choisie par la personne. Avec px, celui qui a augmenté la police par défaut pour mieux lire ne voit aucune différence.

Qu’est-ce que l’avertissement sur le zoom ?

Les WCAG demandent que le texte puisse être agrandi à 200 %. Comme la partie en vw ne grandit pas avec le zoom, un maximum très supérieur au minimum peut empêcher cet agrandissement. Une règle pratique sûre est que le maximum ne dépasse pas 2,5 fois le minimum.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires