Générez un clamp responsive entre deux tailles

Les intégrateurs et designers l’utilisent pour définir une taille fluide entre deux seuils quand un texte ou un composant doit suivre la largeur de l’écran.

Générez un clamp responsive entre deux tailles. Toute l'opération reste dans votre navigateur, sans envoyer, partager ni stocker les données saisies.

Mode d’emploi

Indiquez la taille minimale en pixels que vous voulez obtenir sur petit écran.
Saisissez la taille maximale en pixels pour les grands écrans.
Renseignez la largeur de fenêtre minimale et la largeur de fenêtre maximale en pixels.
Lancez la génération pour obtenir une déclaration CSS de type clamp prête à intégrer.

Exemple

Un exemple courant définit une taille de texte qui évolue entre un petit écran et un grand écran. Après génération, copiez la valeur clamp obtenue et testez-la dans votre feuille de style pour vérifier que le texte suit bien la largeur de la fenêtre.

Entrée

Résultat

clamp(16px, 13.090909px + 0.909091vw, 24px)

Limites et formats

L'outil ne génère que la valeur de taille fluide, pas toute la mise en page ni les autres styles.
La fonction clamp doit être prise en charge par le navigateur utilisé par vos visiteurs.
Des valeurs de fenêtre mal choisies peuvent produire un rendu trop rapide ou trop lent.
Testez toujours le résultat sur plusieurs largeurs d'écran avant de le déployer.

Où le traitement a lieu

Le calcul de la valeur fluide se fait dans votre navigateur. Les dimensions que vous saisissez restent sur votre appareil et ne sont envoyées à aucun service extérieur. Vous pouvez donc préparer votre CSS sans transmission de données.

Questions fréquentes

Que signifient les quatre valeurs demandées ?

Vous indiquez la taille minimale et la taille maximale en pixels, puis la largeur de fenêtre minimale et la largeur de fenêtre maximale. L'outil utilise ces repères pour construire une progression entre les deux tailles.

Puis-je utiliser le résultat pour les marges ou les espacements ?

Oui, la valeur générée peut servir pour une taille de texte, une marge ou un espacement, tant que la propriété CSS accepte une fonction clamp. Adaptez simplement l'unité et la propriété dans votre feuille de style.

Le résultat fonctionne-t-il sur tous les navigateurs ?

La fonction clamp est largement prise en charge par les navigateurs modernes, mais les versions anciennes peuvent ne pas la reconnaître. Prévoyez une valeur de repli si vous devez supporter des navigateurs très anciens.