CSS Clamp()-beregner

CSS clamp(MIN, PREFERRED, MAX) lader én deklaration erstatte en hel bunke media queries: værdien forbliver på MIN under den mindste viewport, på MAX over den største, og skalerer jævnt derimellem. Den vanskelige del er PREFERRED-leddet – et viewport-relativt udtryk som f.eks. 0,833rem + 0,833vw – som ingen ønsker at udlede manuelt. Denne beregner udregner det konkret ud fra fire tal: en minimumstørrelse, en maksimumstørrelse og den viewport-bredde, som hver af dem gælder ved.

Hvert mellemliggende tal vises, ikke kun den endelige linje: hældningen (hvor mange størrelsesenheder værdien vokser pr. pixel af viewport), den samme hældning udtrykt som en vw-koefficient og y-akse-skæringspunktet – den konstant, der lægges til vw-leddet, så linjen passerer nøjagtigt gennem de to punkter, du angav. Enhver, der har indsat en clamp()-værdi fra en tutorial uden at forstå den, kan se og kontrollere den faktiske aritmetik her.

En slider for viewport-bredde styrer en direkte forhåndsvisning, så den flydende skalering er synlig, ikke bare beregnet: træk den mellem minimum- og maksimum-breakpointet, og se eksempelteksten ændre størrelse præcis som den ville, mens et rigtigt browservindue ændres i størrelse. Output-linjen og oversigten opdateres for hvert tastetryk – dette fungerer naturligt sammen med konverteren fra px til rem, når selve grundskriftstørrelsen også skal konverteres.

Skift til type-skala-tilstand for et komplet flydende typografisystem i ét trin: indtast en grundstørrelse og et modulært forhold (1,125 op til 1,5) og få seks størrelser – lille, grundlæggende, h4, h3, h2 og h1 – hver beregnet som sin egen clamp()-linje mellem en blidere mobilprogression og det fulde desktop-forhold, klar til at kopiere som en blok af CSS custom properties.