Calculatrice CSS Clamp()
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(MIN, PREFERRED, MAX) permet à une déclaration de remplacer toute une pile de requêtes multimédias : la valeur reste à MIN en dessous de la plus petite fenêtre d'affichage, à MAX au-dessus de la plus grande et évolue en douceur entre les deux. La partie la plus difficile est le terme PRÉFÉRÉ — une expression relative à la fenêtre d'affichage telle que 0,833rem + 0,833vw — que personne ne veut dériver manuellement. Cette calculatrice le calcule réellement à partir de quatre nombres : une taille minimale, une taille maximale et la largeur de la fenêtre d'affichage à laquelle chacun s'applique.
Chaque nombre intermédiaire est affiché, pas seulement la ligne finale : la pente (de combien d'unités de taille la valeur augmente par pixel de la fenêtre d'affichage), cette même pente exprimée sous forme de coefficient vw et l'intersection de l'axe y - la constante ajoutée au terme vw pour que la ligne passe exactement par les deux points que vous avez spécifiés. Quiconque a collé une valeur clamp() à partir d'un didacticiel sans la comprendre peut voir et vérifier l'arithmétique réelle ici.
Un curseur de largeur de fenêtre pilote une zone d'aperçu en direct, de sorte que la mise à l'échelle fluide est visible, pas seulement calculée : faites-la glisser entre les points d'arrêt min et max et regardez l'exemple de texte se redimensionner exactement comme il le ferait pendant qu'une véritable fenêtre de navigateur est redimensionnée. La ligne de sortie et la répartition sont mises à jour à chaque frappe - cela s'associe naturellement au convertisseur px en rem lorsque la taille de police de base elle-même doit également être convertie.
Passez en mode échelle de caractères pour un système de typographie fluide complet en une seule étape : entrez une taille de base et un rapport modulaire (1,125 jusqu'à 1,5) et obtenez six tailles - petite, base, h4, h3, h2 et h1 - chacune calculée comme sa propre ligne clamp() entre une progression mobile plus douce et le rapport de bureau complet, prête à être copiée sous forme de bloc de propriétés personnalisées CSS.