CSS Clamp() Lommeregner
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
CSS-klemme(MIN, PRREFERRED, MAX) lader én erklæring erstatte en hel stak medieforespørgsler: værdien forbliver på MIN under den mindste visningsport, ved MAX over den største og skaleres jævnt ind imellem. Den svære del er det FORETRUKNE udtryk - et viewport-relativt udtryk såsom 0.833rem + 0.833vw - som ingen ønsker at udlede i hånden. Denne lommeregner beregner det i virkeligheden ud fra fire tal: en minimumsstørrelse, en maksimumstørrelse og den visningsportsbredde, hvor hver enkelt gælder.
Hvert mellemliggende tal vises, ikke kun den sidste 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-aksens skæringspunkt - konstanten tilføjet til vw-leddet, så linjen passerer gennem præcis de to punkter, du har angivet. Enhver, der har indsat en clamp()-værdi fra en tutorial uden at forstå den, kan se og kontrollere den faktiske aritmetik her.
En skyder til visningsportbredde driver en live forhåndsvisningsboks, så den flydende skalering er synlig, ikke kun beregnet: Træk den mellem min og maks. brudpunkter og se prøveteksten ændre størrelsen nøjagtigt, som den ville, mens størrelsen på et rigtigt browservindue ændres. Outputlinjen og opdelingsopdateringen ved hvert tastetryk - dette parrer naturligt med px til rem-konverteren, når selve basisskriftstørrelsen også skal konverteres.
Skift til typeskalatilstand for et komplet flydende typografisystem i ét trin: Indtast en basisstørrelse og et modulært forhold (1,125 op til 1,5) og få seks størrelser - small, base, h4, h3, h2 og h1 - hver beregnet som sin egen clamp()-linje mellem en blidere mobil progression og det fulde desktop-egenskabsforhold, klar til at kopiere som en blok af CSS-brugerdefinerede egenskaber.