Générateur CSS clamp()

Générateur CSS clamp() : tailles de police et espacements fluides | We.Inc

Générateur CSS clamp() gratuit. Fixez une taille minimale, une taille maximale et les largeurs d'écran entre les deux pour obtenir du CSS de font-size ou d'espacement fluide qui s'adapte en douceur.

Générateur CSS clamp()

Indiquez une taille pour les petits écrans, une pour les grands et les largeurs d'écran où chacune s'applique, et obtenez une seule ligne clamp() qui grandit en douceur entre les deux. Utilisez-la pour les titres, le texte courant, le padding et les gaps, afin qu'un design suive la taille de l'écran sans une pile de media queries.

Saisissez la plus petite taille souhaitée, en pixels, et la largeur d'écran où elle doit s'appliquer (souvent 320 ou 375 pixels pour les téléphones).
Saisissez la plus grande taille et la largeur d'écran où elle doit cesser de grandir (souvent de 1200 à 1440 pixels).
L'outil calcule la droite entre ces deux points et l'écrit sous forme de rem plus vw dans clamp().
Copiez la ligne CSS dans votre feuille de style. Changez le nom de la propriété si vous dimensionnez un padding, une marge ou un gap plutôt que du texte.

Gardez une part en rem dans la valeur centrale. Une taille composée uniquement de vw ignore le réglage de taille de police du navigateur, et le zoom du texte ne fonctionne plus ; mélanger rem et vw préserve le zoom.
Ne laissez pas le texte courant descendre sous 16 pixels sur téléphone. Les tailles fluides sont surtout utiles pour les titres, où l'écart entre mobile et ordinateur est grand.
Utilisez les deux mêmes largeurs d'écran pour tous les clamp() d'un site. Toutes les tailles commencent et cessent alors de grandir ensemble, ce qui garde les proportions du design stables.
Si votre site modifie la taille de police racine de 16 pixels, réglez le champ de taille racine en conséquence, sinon chaque valeur en rem sera décalée dans la même proportion.

Questions fréquentes

Comment fonctionne CSS clamp() ?

clamp(MIN, PRÉFÉRÉ, MAX) utilise la valeur préférée sans jamais descendre sous MIN ni dépasser MAX. Avec clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem), le texte fait 16 pixels sur les écrans étroits, 24 pixels sur les écrans larges, et grandit de façon linéaire entre les deux.

Quelle formule se cache derrière la valeur centrale ?

La pente est (taille max moins taille min) divisée par (largeur max moins largeur min). La part en vw est la pente multipliée par 100. La part fixe est la taille min moins la pente multipliée par la largeur min, puis divisée par la taille de police racine pour la convertir en rem. Pour 16 à 24 pixels entre des écrans de 320 et 1280 pixels : pente = 8 / 960 = 0.008333, donc 0.8333vw ; part fixe = 16 moins 2.6667 = 13.3333 pixels, soit 0.8333rem.

clamp() est-il pris en charge par tous les navigateurs ?

Oui. Toutes les versions actuelles de Chrome, Edge, Firefox et Safari prennent en charge clamp(). Seuls les navigateurs en retard de plusieurs années l'ignorent, et ils utilisent alors la taille définie plus haut dans le CSS.

Puis-je faire rétrécir un élément quand l'écran s'élargit ?

Oui. Saisissez une taille plus grande pour le petit écran que pour le grand. La pente devient négative et l'outil place quand même la plus petite taille en premier dans clamp(), comme l'exige la fonction.

Faut-il aussi utiliser clamp() pour les espacements ?

Cela fonctionne bien pour le padding des sections et les gaps de grille, souvent trop grands sur téléphone et trop serrés sur grand écran. Utilisez les mêmes largeurs d'écran que pour le texte afin que espacements et texte évoluent ensemble.

Pourquoi une taille fluide a besoin de deux points d'ancrage

Une taille fluide est une droite tracée entre deux points : la taille voulue pour une petite largeur d'écran et celle voulue pour une grande. clamp() empêche ensuite la droite de dépasser l'une ou l'autre extrémité. Bien choisir ces deux points compte plus que les chiffres exacts : prenez la largeur de téléphone la plus étroite que vous visez et la largeur où votre colonne de contenu cesse de s'élargir.
Si l'ancrage haut est bien plus large que votre colonne de contenu, le texte continue de grandir sur les grands écrans alors que la mise en page ne s'élargit plus, et les titres paraissent démesurés à côté d'une colonne à largeur fixe. Aligner l'ancrage haut sur la largeur de votre conteneur évite ce problème.

Accessibilité et zoom

Les navigateurs permettent d'augmenter la taille de police par défaut, et beaucoup de personnes malvoyantes en dépendent. Une taille écrite uniquement en vw ignore complètement ce réglage. C'est la part en rem de la valeur centrale qui garde une taille fluide sensible au choix du visiteur, et c'est pourquoi cet outil écrit toujours la part fixe en rem.
Vérifiez le résultat en zoomant la page à 200 pour cent. Le texte écrit avec clamp() doit continuer de grandir. Si un titre change à peine, la part en vw est trop forte par rapport à la part en rem ; réduisez l'écart entre la taille minimale et la taille maximale, puis testez à nouveau.

Propriété CSS

Taille minimale

Taille maximale

Largeur d'écran pour la taille minimale

Largeur d'écran pour la taille maximale

Taille de police racine

Croissance par 100px d'écran

Part fixe

La largeur d'écran de la taille maximale doit être supérieure à celle de la taille minimale.

Générateur CSS clamp()