Gratis CSS clamp()-generator
Generer en flytende CSS clamp()-verdi for responsiv typografi og avstand. Angi min-/maksstørrelse og visningsbredde-intervall, se en live forhåndsvisning og kopier CSS-en på én linje.
Rendert størrelse ved ulike viewports
clamp(min, preferred, max) skalerer en verdi flytende med viewporten og låser deretter ved min og max. Det erstatter bunker av mediespørringer for typografi, avstand og bredder med én enkelt linje.
Vanlige bruksområder
- Opprett flytende responsiv typografiSkaler skriftstørrelser jevnt mellom mobil og desktop med en linje.
- Flytende marginer og fyllingFå seksjonsspalting til å vokse med visningsvinduet i stedet for å hoppe ved pausepunkter.
- Erstatt mediespørsmål med clamp()Kollapss stakker av pausepunkter overstyringer til en enkelt flytende verdi.
- Bygg en flytende typskalaGenerer konsistente clamp()-trinn for en designsystems typskala.
- Flytende helt og visningsoverskrifterGjør store landingssidestrykkinger skala dramatisk men fortsatt sikkert.
Hvordan det fungerer
Verktøyet beregner CSS clamp()-verdier med en håndskrevet lineær interpolasjonsformel — ingen biblioteker, ingen turer til serveren. Du oppgir to størrelser og to visningsbredder; matematikken kjører umiddelbart i nettleseren og gir et clamp()-uttrykk klart til å lime inn, med en vw-basert foretrukket verdi som skalerer tekst eller avstand jevnt mellom disse bruddpunktene.
- 1Beregning av lineært stigningstallVerktøyet beregner et stigningstall piksel for piksel: (maxSize - minSize) / (maxViewport - minViewport). Stigningstallet gjøres så om til vw-enheter ved å gange med 100, som er kjernen i hvordan viewport-relativ skalering i CSS fungerer.
- 2Utledning av konstantleddEt konstantledd (i px eller rem) beregnes slik at den lineære funksjonen treffer nøyaktig minimumsstørrelsen ved minste visningsbredde. Sammen danner stigningstall og konstantledd den foretrukne verdien i clamp() — den delen som faktisk skalerer.
- 3Enhetskonvertering og formateringVelger du rem som utdata, deles hver pikselverdi på den angitte rotskriftstørrelsen (standard 16px) før den skrives inn i clamp()-strengen. En tilsvarende Tailwind-klasse med vilkårlig verdi lages også, med mellomrom erstattet av understrek etter Tailwinds syntaks.
- 4Live forhåndsvisning med visningsbredde-glidebryterEn glidebryter lar deg bla fra 320px til 1920px bredde. I hver posisjon regner den samme formelen med stigningstall og konstantledd ut den begrensede størrelsen i sanntid og viser eksempeltekst i den beregnede pikselstørrelsen, så du ser skaleringen før du kopierer noe.
Relaterte verktøy
CSS Grid-generator
Utform et CSS-rutenett visuelt — spor, enheter og mellomrom — og kopier den genererte CSS og HTML.
Hva er skjermoppløsningen min
Se skjermoppløsningen din i CSS- og reelle piksler, vindusstørrelse, pikselforhold, fargedybde, HDR, berøringsstøtte og oppdateringsfrekvens, og kopier alt.
Signaturmaker
Tegn en signatur med mus, finger eller pekepenn, eller skriv navnet ditt i en håndskriftfont, og eksporter den som gjennomsiktig PNG eller SVG.