CSS clamp()
Generera responsiva clamp()-värden i CSS för flytande typografi
Om den här räknaren
Räknaren för CSS clamp() skapar ett flytande clamp(min, preferred, max)-uttryck som skalar ett värde linjärt mellan två visningsbredder. Ange minsta och största värde (rem eller px) och visningsintervallet, så tar den fram vw-lutningen och skärningen för linjen genom båda punkterna, plus de beräknade värdena vid varje brytpunkt som kontroll. En rotteckenstorlek på 16px antas för rem. Omvända intervall ger valideringsfel. Perfekt för flytande typografi och avstånd.
CSS clamp() – steg för steg
- Skriv in eller klistra in dina indata i fältet.
- Läs av utdata – de uppdateras direkt medan du skriver.
- Justera eventuella alternativ efter ditt behov.
- Kopiera sidans URL för att dela exakt det här resultatet.
Vanliga exempel
- 1rem vid 320px → 2rem vid 1280px → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
- 1.25rem vid 375px → 3rem vid 1440px → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
- 16px vid 320px → 32px vid 1200px → clamp(16px, 1.8182vw + 10.1818px, 32px)
Vanliga frågor
CSS clamp(): hur fungerar det?
Skriv in eller klistra in dina indata så bearbetas de direkt i webbläsaren och resultatet visas omedelbart. Inget du skriver laddas upp till en server – hela beräkningen sker på din enhet.
CSS clamp(): när har man nytta av det?
Det är praktiskt för utveckling, felsökning, design och administration – närhelst du snabbt behöver göra den här omvandlingen eller kontrollen utan att installera något eller anförtro dina data åt en tredjepartstjänst.
Hur tillförlitliga är resultaten?
Verktyget implementerar den relevanta standarden eller specifikationen direkt, så utdata stämmer med vad programvara som följer standarden ger. Specialfall som tom eller felaktigt formaterad indata rapporteras tydligt i stället för att misslyckas i det tysta.
Kan jag dela ett visst resultat med någon annan?
Ja. Dina indata uppdaterar URL:en, så om du kopierar adressfältet och delar länken öppnas verktyget i samma läge för den som klickar på den.