Gratis CSS clamp()-generator
Generera ett flytande CSS clamp()-värde för responsiv typografi och avstånd. Ange min/max-storlek och vyportintervall, se en liveförhandsvisning och kopiera en-rads-CSS.
Renderad storlek vid olika viewports
clamp(min, preferred, max) skalar ett värde flytande med viewporten och låser sedan vid min och max. Det ersätter staplar av mediafrågor för typografi, avstånd och bredder med en enda rad.
Vanliga användningar
- Skapa flytande responsiv typografiSkala skriftstorlekar smidigt mellan mobil och skrivbord med en rad.
- Flytande marginaler och utfyllnadFå avsnittsavstånd att växa med viewporten istället för att hoppa vid brytpunkter.
- Ersätt mediafrågor med clamp()Kollapsa staplar av brytpunktsöversättningar till ett enda flytande värde.
- Bygg en flytande typskalaGenerera konsekventa clamp()-steg för en designsystem-typskala.
- Flytande hero och visningsrubrikerGör stora landningssidrubriker skalas dramatiskt men ändå på ett säkert sätt.
Så här fungerar det
Det här verktyget beräknar CSS clamp()-värden med en handskriven linjär interpolationsformel — inga bibliotek, ingen serverrundtur. Du anger två storlekar och två fönsterbredder; matematiken körs direkt i din webbläsare och skapar ett klistra-in-klart clamp()-uttryck med ett vw-baserat föredraget värde som skalar din text eller mellanrum jämnt mellan dessa brytpunkter.
- 1Beräkning av linjär lutningVerktyget beräknar en lutning i pixel per pixel: (maxStorlek - minStorlek)/(maxFönster - minFönster). Denna lutning omvandlas sedan till vw-enheter genom multiplikation med 100, vilket är kärnan i hur CSS-fönsterrelativ skalning fungerar.
- 2Härledning av skärningspunktEn skärningspunktsförskjutning (i px eller rem) beräknas så att den linjära funktionen träffar exakt din minsta storlek vid minsta fönsterbredd. Tillsammans utgör lutning och skärningspunkt det föredragna värdet inuti clamp() — den del som faktiskt skalar.
- 3Enhetsomvandling och utdataformateringOm du väljer rem-utdata delas varje pixelvärde med din inställda rotteckenstorlek (standard 16px) innan det skrivs in i clamp()-strängen. En matchande godtycklig Tailwind-värdesklass skapas också, med mellanslag ersatta av understreck enligt Tailwinds syntax.
- 4Levande förhandsvisning med fönsterreglageEtt intervallreglage låter dig bläddra från 320px till 1920px bredd. Vid varje position utvärderar samma lutnings- och skärningspunktsformel den begränsade storleken i realtid och renderar exempeltext i den beräknade pixelstorleken, så att du kan se skalningsbeteendet innan du kopierar något.
Relaterade verktyg
CSS Grid-generator
Designa visuellt ett CSS-rutnät — spår, enheter och gap — och kopiera den genererade CSS och HTML.
Vad är min skärmupplösning
Se din skärmupplösning i CSS och verkliga pixlar, fönsterstorlek, pixelförhållande, färgdjup, HDR, pekstöd och uppdateringsfrekvens, och kopiera allt.
Signaturskapare
Rita en signatur med musen, fingret eller pennan, eller skriv ditt namn i ett handstilstypsnitt, exportera den sedan som en transparent PNG eller SVG.