Gratis CSS clamp()-generator
Generer en flydende CSS clamp()-værdi til responsiv typografi og afstand. Angiv min/max-størrelse og viewport-interval, se en liveforhåndsvisning og kopiér den ene linje CSS.
Renderet størrelse ved forskellige viewports
clamp(min, preferred, max) skalerer en værdi flydende med viewporten og låser derefter ved min og max. Det erstatter stakke af medieforespørgsler til typografi, afstand og bredder med én enkelt linje.
Almindelige anvendelser
- Opret flydende responsiv typografiSkaler skriftstørrelser problemfrit mellem mobilog desktop med en linje.
- Flydende marginer og polstringFå sektionsafstand til at vokse med viewporten i stedet for at hoppe ved bruddpunkter.
- Erstat medieforsøg med clamp()Sammensnoet stakke af pausepunktoverrytelser til en enkelt flydende værdi.
- Byg en flydende typskalaGenerer konsistente clamp()-trin til en designsystems typskala.
- Flydende helt og visningsrubrikkerGør store landingssidehoveder skala dramatisk men stadig sikkert.
Sådan fungerer det
Værktøjet beregner CSS clamp()-værdier med en håndskrevet lineær interpolationsformel — ingen biblioteker, ingen ture til en server. Du indtaster to størrelser og to viewport-bredder; beregningen kører øjeblikkeligt i din browser og giver et clamp()-udtryk klar til indsættelse med en vw-baseret foretrukken værdi, der skalerer din tekst eller afstand jævnt mellem de to brudpunkter.
- 1Beregning af lineær hældningVærktøjet beregner en hældning pixel for pixel: (maxSize - minSize) / (maxViewport - minViewport). Hældningen omregnes derefter til vw-enheder ved at gange med 100, hvilket er kernen i, hvordan viewport-relativ skalering i CSS fungerer.
- 2Udledning af skæringEn skæringsforskydning (i px eller rem) beregnes, så den lineære funktion rammer præcis din minimumsstørrelse ved minimumsviewporten. Sammen udgør hældning og skæring den foretrukne værdi inde i clamp() — den del, der faktisk skalerer.
- 3Enhedskonvertering og outputformateringVælger du rem-output, divideres hver pixelværdi med din angivne rodskriftstørrelse (standard 16px), før den skrives ind i clamp()-strengen. Der laves også en tilsvarende Tailwind-klasse med vilkårlig værdi, hvor mellemrum erstattes af understregninger efter Tailwinds syntaks.
- 4Live forhåndsvisning med viewport-skyderEn skyder lader dig bevæge dig fra 320px til 1920px bredde. Ved hver position beregner den samme hældnings- og skæringsformel den afgrænsede størrelse i realtid og viser eksempeltekst i den beregnede pixelstørrelse, så du kan se skaleringen, før du kopierer noget.
Relaterede værktøjer
CSS Grid-generator
Design visuelt et CSS-grid — spor, enheder og mellemrum — og kopier det genererede CSS og HTML.
Hvad er min skærmopløsning
Se din skærmopløsning i CSS og reelle pixels, vinduesstørrelse, pixelratio, farvedybde, HDR, touch-understøttelse og opdateringshastighed, og kopiér det hele.
Underskriftsgenerator
Tegn en underskrift med mus, finger eller pen, eller skriv dit navn med en håndskriftsskrifttype, og eksportér den som gennemsigtig PNG eller SVG.