⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Générateur de tartre de type fluide

Calculez une véritable valeur CSS clamp() fluide à partir d'une taille minimale et maximale sur deux largeurs de fenêtre, avec la pente et l'intersection affichées étape par étape et un aperçu de redimensionnement en direct.

Traitement... 0%

Résultat

Cette page ouvre la calculatrice directement en mode échelle de caractères avec une base de 16 px et un rapport de 1,25 (tiers majeur) déjà sélectionnés — un point de départ solide et largement utilisé pour une échelle typographique. À partir de ces deux seuls nombres, six tailles sont générées : small, base, h4, h3, h2 et h1, chacune ayant sa propre valeur fluid clamp() plutôt qu'une seule taille fixe.

Chaque étape maintient la taille de base ancrée à la même valeur à la fois sur le mobile et sur le bureau, tandis que les titres augmentent de manière plus agressive sur la fenêtre d'affichage du bureau plus large que sur celle du mobile étroite - la même idée que de choisir un rapport plus doux pour les petits écrans et un plus audacieux pour les grands écrans, dérivé automatiquement du rapport unique que vous choisissez.

Changer le rapport en 1,125, 1,2, 1,333 ou 1,5 régénère instantanément toute la table et le bouton en dessous copie les six valeurs clamp() sous la forme d'un bloc prêt à coller de propriétés personnalisées CSS pour le reste de la feuille de style à référencer.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Mathématiques réelles de typographie fluide : pente, coefficient vw et intersection de l'axe y affichés explicitement, pas seulement la ligne finale clamp().
  • Aperçu en direct : faites glisser le curseur de largeur de la fenêtre pour voir l'exemple de texte redimensionné exactement comme il le ferait lors du redimensionnement d'une véritable fenêtre de navigateur.
  • Mode échelle de type : une taille de base et un rapport de 1,125 à 1,5 génèrent six étapes fluid clamp() – small, base, h4, h3, h2, h1 – en tant que CSS prêt à être copié.

Avantages clés

✓ La ligne clamp(), les numéros de pente et d'intersection et l'aperçu en direct sont tous mis à jour au fur et à mesure que vous tapez – aucun bouton sur lequel appuyer.
✓ Un curseur de largeur de fenêtre pilote une boîte de prévisualisation en direct, de sorte que vous voyez la mise à l'échelle exacte du fluide en action entre les points d'arrêt min et max, et pas seulement une formule.
✓ Un mode d'échelle de type distinct transforme une taille et un rapport de base en une échelle de titre fluide complète en 6 étapes, prête comme un bloc de propriétés personnalisées CSS.

Cas d'utilisation

  • • Transformez une taille de police min/max et une plage de fenêtre en une véritable ligne clamp() - pente, coefficient vw et intersection inclus - au lieu d'en regarder une à partir d'un didacticiel.
  • • Faites glisser un curseur de largeur de fenêtre pour prévisualiser un titre fluide ou un redimensionnement de la taille du corps exactement comme il le ferait lors du redimensionnement d'une véritable fenêtre de navigateur, avant de le valider dans une feuille de style.
  • • Générez une échelle complète de type fluide en 6 étapes (de petite à h1) à partir d'une taille et d'un rapport de base, copiés sous forme de bloc prêt à coller de propriétés personnalisées CSS.
  • • Créez une pince fluide () pour l'espacement (marge, remplissage, espace) au lieu de la taille de la police — la même formule de pente/intersection s'applique à n'importe quelle propriété CSS.