Générateur de clamp() CSS

Qu'est-ce que Générateur de clamp() CSS ?

Le générateur de clamp() CSS est un calculateur gratuit de typographie fluide pour les développeurs front-end et les designers. Vous lui indiquez une taille de police minimale, une maximale, une largeur de viewport minimale et une maximale ; il renvoie une déclaration clamp(min, préférée, max) où la valeur préférée combine un décalage en rem avec une pente en vw, de sorte que le texte grandit linéairement avec l'écran sans jamais sortir de vos limites. Cela supprime le besoin de media queries font-size empilées et garde titres et corps de texte adaptables sur chaque appareil. Choisissez une taille d'aperçu pour voir le rendu de la valeur, basculez l'unité de sortie entre rem et px, et copiez la ligne directement dans votre feuille de styles.

Comment utiliser Générateur de clamp() CSS

1. Saisissez la taille de police minimale — la taille que le texte doit avoir sur le plus petit écran.
2. Saisissez la taille de police maximale — la taille que le texte doit atteindre sur le plus grand écran.
3. Définissez les largeurs de viewport minimale et maximale entre lesquelles la taille doit s'adapter.
4. Ouvrez les paramètres pour changer l'unité de sortie (rem reste accessible ; px est aussi disponible) si vous préférez.
5. Choisissez une taille d'aperçu pour rendre un texte d'exemple à ce viewport, puis lisez la valeur clamp() en direct.
6. Copiez l'expression clamp() générée et collez-la dans votre font-size CSS.

Exemples

police min 16, police max 20, vw min 320, vw max 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

police min 32, police max 64, vw min 320, vw max 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

police min 12, police max 14, vw min 480, vw max 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Questions fréquentes

Comment la valeur clamp() s'adapte-t-elle sans media queries ?

clamp(min, préférée, max) prend une borne inférieure, une valeur préférée (fluide) et une borne supérieure. La valeur préférée est une droite de la forme rem + vw, calculée pour que la police soit égale à votre minimum au viewport minimal et à votre maximum au viewport maximal. Entre ces largeurs, le navigateur interpole automatiquement, et au-delà, clamp() fixe la taille à la borne la plus proche — le tout en une seule déclaration.

Pourquoi la sortie est-elle en rem plutôt qu'en px ?

Utiliser rem pour les parties fixes respecte le réglage de taille de police du navigateur de l'utilisateur, ce qui est meilleur pour l'accessibilité. La pente relative au viewport est exprimée en vw. Vous pouvez changer l'unité en px dans les paramètres si votre projet a besoin d'unités absolues, mais rem est la valeur par défaut recommandée.

Quelle plage de viewport dois-je utiliser ?

Un choix courant est votre plus petite largeur prise en charge (souvent 320px ou 360px) pour le minimum et votre conteneur de contenu le plus large (par exemple 1240px–1536px) pour le maximum. La police n'est entièrement fluide qu'à l'intérieur de cette plage ; en dessous, le texte reste au minimum et au-dessus, au maximum.

Cela fonctionne-t-il pour n'importe quelle longueur CSS, pas seulement font-size ?

Oui. La valeur clamp() générée n'est qu'une longueur, vous pouvez donc la coller dans padding, margin, gap ou toute propriété qui accepte une longueur. Les étiquettes mentionnent font-size parce que la typographie fluide est l'usage le plus courant, mais le calcul est identique pour les espacements.

Mes données sont-elles envoyées quelque part ?

Non. Le calcul s'exécute entièrement dans votre navigateur avec JavaScript — vos tailles de police et largeurs de viewport ne sont jamais envoyées à un serveur, l'outil fonctionne donc en privé et même hors ligne une fois la page chargée.