CSS clamp()-kalkylator

Ange en storlek för små och stora skärmar och få ett flytande clamp()-värde som skalas mjukt däremellan – för textstorlekar, padding, marginaler eller gap.

Storlekar
Min
Max
clamp()-värde
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Resultatet behåller en rem-del i mitten, så att texten fortfarande förstoras när någon zoomar till 200% – vilket inte sker med ett rent viewport-värde.

Förhandsvisning

Flytande text, helt perfekt anpassad.

Justera storlekar och skärmbredder för att forma värdet.

Beräkningen sker helt i din webbläsare. Inget av det du skriver in här laddas upp till BroBroGo.

Vanliga frågor

Hur bygger kalkylatorn upp clamp()-värdet?

Du anger två punkter: en storlek vid en liten skärmbredd och en storlek vid en stor skärmbredd. Den ritar en rät linje mellan dem så att storleken växer mjukt när skärmen blir bredare, och omsluter den sedan i clamp() så att den aldrig går under din minsta storlek eller överstiger din största. Mellan de två bredderna skalas storleken flytande; utanför dem stannar den vid närmaste gräns.

Varför är resultatet i rem och vw istället för pixlar?

Gränserna är i rem och den rörliga mittendelen behåller en rem-komponent, så att texten fortfarande växer när en läsare zoomar in eller höjer webbläsarens standardtextstorlek – ett värde med bara pixlar eller viewport kan förhindra detta. Du skriver in storlekar i pixlar eftersom det är så de flesta tänker på dem, och verktyget konverterar till rem baserat på din rot-textstorlek.

Kan jag använda detta för marginaler och avstånd, inte bara teckenstorlek?

Ja. Samma värde fungerar för padding, margin, gap, bredd eller höjd – överallt där ett mått används. Ändra förhandsvisningen till Box för att se avståndet växa istället för texten. Om dina små och stora storlekar är likadana faller resultatet tillbaka till en vanlig fast längd, eftersom det inte finns något att skala.

Stödjer alla webbläsare clamp()?

Ja – alla moderna webbläsare har haft stöd för clamp() sedan 2020, så du kan använda värdet direkt utan fallback. Vid ett väldigt stort maxvärde eller en snabb förändringstakt är det dock bra att göra en snabb koll med 200% zoom så att texten fortfarande förstoras för användare som behöver det.

CSS Cubic Bezier-generatorDra i de två handtagen för att forma en övergångskurva, se en punkt följa den bredvid en linjär rörelse och kopiera cubic-bezier()-värdet.Box Shadow-generatorDra i reglagen för att forma en box-shadow, stapla lager för djup och kopiera den färdiga CSS-koden direkt.Gradient-generatorBygg en linjär, radiell eller konisk toning, lägg till färgstopp och ställ in riktningen, och kopiera sedan CSS-koden med ett klick.Border Radius-generatorRunda varje hörn med reglage, skapa organiska former med det elliptiska läget och kopiera din CSS direkt.Flexbox-generatorSkapa en flex-container och dess objekt med visuella kontroller, se layouten reagera direkt och kopiera CSS-koden med ett klick.CSS Grid-generatorStäll in kolumner och rader, dra över cellerna för att placera ut objekt och kopiera CSS-koden med matchande HTML med ett klick.CSS-formaterare & minifierareStrukturera rörig CSS för att göra den läsbar, eller minifiera den inför driftsättning – med ett säkert läge som aldrig ändrar ordningen på dina regler.Konverterare för px till rem & emKonvertera mellan px, rem och em med dina egna storlekar för rot och kontext – ändra valfritt fält så uppdateras de andra två medan du skriver.