Fluid Font Size Clamp() Generator
Beregn en rigtig flydende CSS-clamp()-værdi ud fra en min og maks. størrelse på tværs af to viewport-bredder, med hældningen og skæringspunktet vist trin for trin og en live-forhåndsvisning af størrelsen.
Resultat
Denne side åbner lommeregneren med en almindelig flydende skriftstørrelsesopsætning, der allerede er udfyldt: 16px ved en 320px viewport op til 24px ved en 1280px viewport. Det er en behagelig krop-til-lidt større rækkevidde, der skalerer jævnt fra en typisk telefonskærm til et typisk skrivebordsvindue, og det er den opsætning, de fleste mennesker mener, når de søger efter en flydende skriftstørrelsesklemme() i første omgang.
De fire tal er åbne for ændring: hæv den maksimale størrelse for en overskrift i stedet for brødtekst, eller indsnæv visningsområdet, hvis designet kun skal bøje mellem en tablet og et skrivebordsbrudpunkt. Uanset hvad du indtaster, genberegnes hældningen og y-aksens skæringspunkt på samme måde og vises som eksplicit aritmetik, ikke skjult inde i den sidste linje.
Under de fire indgange driver en skyder for viewport-bredde et live preview, så skaleringen er synlig med det samme, og den kopiklare clamp()-linje er et klik væk. Skift af outputenheden mellem rem og px genberegner hvert tal uden at røre selve min og maks størrelsesværdierne.