Générateur CSS clamp() — outil gratuit
Générez une valeur CSS clamp() fluide pour la typographie et l'espacement adaptatifs. Définissez les tailles min/max et la plage de viewport, consultez un aperçu en direct et copiez le CSS en une ligne.
Taille rendue selon le viewport
clamp(min, preferred, max) adapte une valeur de façon fluide au viewport, puis la bloque aux extremes min et max. Remplace les piles de media queries pour la typographie, les espacements et les largeurs par une seule ligne.
Utilisations courantes
- Créer une Typographie Responsive FluideDimensionnez les tailles de police en douceur entre mobile et bureau avec une seule ligne.
- Marges et Remplissage FluidesFaites croître l'espacement de la section avec la fenêtre d'affichage au lieu de sauter aux points d'arrêt.
- Remplacer les Requêtes Médias par clamp()Réduisez les piles de remplacements de point d'arrêt en une seule valeur fluide.
- Construire une Échelle de Type FluideGénérer des étapes clamp() cohérentes pour une échelle de type de système de conception.
- Titres Héros et Affichage FluidesFaites en sorte que les grands titres de page de destination se mettent à l'échelle dramatiquement mais en toute sécurité.
Comment ça marche
Cet outil calcule des valeurs CSS clamp() avec une formule d'interpolation linéaire écrite à la main — sans bibliothèque, sans allers-retours serveur. Vous saisissez deux tailles et deux largeurs de fenêtre d'affichage ; le calcul s'exécute instantanément dans votre navigateur et produit une expression clamp() prête à coller avec une valeur préférée basée en vw qui fait évoluer en douceur votre typographie ou vos espacements entre ces points de rupture.
- 1Calcul de la pente linéaireL'outil calcule une pente pixel par pixel : (tailleMax - tailleMin) / (largeurMax - largeurMin). Cette pente est ensuite convertie en unités vw en la multipliant par 100, ce qui est le cœur du fonctionnement de la mise à l'échelle CSS relative à la fenêtre d'affichage.
- 2Dérivation de l'ordonnée à l'origineUn décalage d'ordonnée à l'origine (en px ou rem) est calculé afin que la fonction linéaire atteigne exactement votre taille minimale à la largeur de fenêtre minimale. Ensemble, la pente et l'ordonnée forment la valeur préférée à l'intérieur de clamp() — la partie qui évolue réellement.
- 3Conversion d'unités et mise en forme de la sortieSi vous choisissez une sortie en rem, chaque valeur en pixels est divisée par la taille de police racine configurée (16px par défaut) avant d'être écrite dans la chaîne clamp(). Une classe Tailwind à valeur arbitraire correspondante est aussi produite, avec les espaces remplacés par des soulignés selon la syntaxe de Tailwind.
- 4Aperçu en direct par curseur de fenêtre d'affichageUn curseur de plage vous permet de parcourir de 320px à 1920px de large. À chaque position, la même formule pente-et-ordonnée évalue la taille contrainte en temps réel et affiche un texte d'exemple à cette taille en pixels calculée, afin que vous puissiez voir le comportement de mise à l'échelle avant de copier quoi que ce soit.
Outils associés
Générateur CSS Grid
Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.
Quelle est ma résolution d'écran
Voyez la résolution de votre écran en pixels CSS et réels, la taille de la fenêtre, le ratio de pixels, la profondeur de couleur, le HDR, la prise en charge tactile et le taux de rafraîchissement, et copiez le tout.
Créateur de signature
Dessinez une signature avec votre souris, votre doigt ou un stylet, ou saisissez votre nom dans une police manuscrite, puis exportez-la en PNG ou SVG transparent.