Générateur de pince d'espacement des fluides ()
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.
Résultat
CSS clamp() fonctionne exactement de la même manière pour l'espacement que pour la taille de la police : la propriété se trouve être margin, padding ou gap au lieu de font-size. Cette page ouvre la calculatrice avec une plage de 8 px à 32 px sur une fenêtre d'affichage de 320 px à 1 280 px, une étape courante pour le remplissage de section ou les espaces de carte qui devraient sembler étroits sur un téléphone et spacieux sur un ordinateur de bureau sans requête multimédia en vue.
Les mathématiques sous-jacentes ne se soucient pas de ce que représentent les nombres : la même formule de pente et d'intersection de l'axe y qui produit une taille de titre fluide produit une valeur d'espacement fluide, donc la répartition ci-dessous montre exactement comment 8px et 32px se transforment en une ligne clamp() prête à être copiée pour le remplissage : clamp(...).
Faites glisser le curseur de largeur de la fenêtre pour prévisualiser l'espacement à n'importe quelle largeur entre les deux points d'arrêt, ajustez les valeurs min et max pour une plage plus étroite ou plus lâche et copiez la ligne terminée directement dans la propriété d'espacement qui en a besoin.