CSS clamp() Beregner

Indtast en størrelse til små og store skærme, og få en flydende clamp()-værdi, der skalerer jævnt derimellem — til skriftstørrelser, padding, marginer eller gaps.

Størrelser
Minimum
Maksimum
clamp()-værdi
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Resultatet bevarer en rem-del i det midterste led, så teksten stadig forstørres, når der zoomes til 200% — en ren viewport-værdi ville ikke gøre dette.

Forhåndsvisning

Flydende tekst, helt perfekt tilpasset.

Juster størrelserne og skærmbredderne for at forme værdien.

Beregningen sker udelukkende i din browser. Intet af det, du indtaster her, uploades til BroBroGo.

FAQ

Hvordan opbygger beregneren clamp()-værdien?

Du angiver to punkter: en størrelse ved en lille skærmbredde og en størrelse ved en stor skærmbredde. Beregneren tegner en ret linje mellem dem, så størrelsen vokser jævnt, efterhånden som skærmen bliver bredere, og pakker den derefter ind i clamp(), så den aldrig falder under din mindste størrelse eller overstiger din største størrelse. Mellem de to bredder skalerer størrelsen flydende; udenfor fastholdes den ved den nærmeste grænse.

Hvorfor er resultatet i rem og vw i stedet for pixels?

Grænserne er i rem, og den foranderlige midterste del bevarer en rem-komponent, så teksten stadig vokser, når en læser zoomer ind eller øger browserens standard-skriftstørrelse — en ren pixel- eller viewport-værdi kan forhindre dette i at fungere. Du indtaster størrelser i pixels, fordi det er sådan, de fleste tænker på dem, og værktøjet konverterer til rem baseret på din root-skriftstørrelse.

Kan jeg bruge dette til afstande og ikke kun skriftstørrelse?

Ja. Den samme værdi fungerer til padding, margin, gap, bredde eller højde — alle steder, hvor der bruges en længde. Skift forhåndsvisningen til Boks for at se afstanden vokse i stedet for teksten. Hvis din mindste og største størrelse er ens, falder resultatet tilbage til en almindelig fast længde, da der ikke er noget at skalere.

Understøtter alle browsere clamp()?

Ja — alle moderne browsere har understøttet clamp() siden 2020, så du kan bruge værdien direkte uden fallback. Ved et meget stort maksimum eller en hurtig ændringshastighed er det dog en god idé lige at tjekke ved 200% zoom, at teksten stadig forstørres for brugere, der har brug for det.

CSS Cubic Bezier-generatorTræk i de to håndtag for at forme en easing-kurve, se en prik bevæge sig langs den i forhold til en jævn bevægelse, og kopier cubic-bezier()-værdien.Box shadow-generatorTræk i skyderne for at forme en box-shadow, stabel lag for at skabe dybde, og kopier den færdige CSS med det samme.Gradient-generatorByg en lineær, radial eller konisk gradient, tilføj farvestop og indstil retningen, og kopier derefter CSS-koden med ét klik.Border radius-generatorAfrund hvert hjørne med skydere, form organiske klatter med elliptisk tilstand, og kopier din CSS med det samme.Flexbox-generatorOpsæt en flex-container og dens elementer med visuelle kontroller, se layoutet reagere live, og kopier CSS-koden med ét klik.CSS Grid-generatorIndstil dine søjler og rækker, træk hen over cellerne for at placere elementer, og kopier grid-CSS med tilhørende HTML med ét klik.CSS Formaterings- og minificeringsværktøjGenindryk rodet CSS for at gøre det læsbart, eller minificer det til udgivelse – med en sikker tilstand, der aldrig ændrer rækkefølgen af dine regler.Konverter px til rem & emKonverter mellem px, rem og em ved hjælp af dine egne root- og kontekst-skriftstørrelser — rediger et felt, og de to andre opdateres, mens du skriver.