CSS clamp() Calculator

Maglagay ng sukat para sa maliliit at malalaking screen at kumuha ng fluid na clamp() value na maayos na nag-i-scale sa pagitan — para sa mga sukat ng font, padding, margin o gap.

Mga Sukat
Minimum
Maximum
clamp() value
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Ang resulta ay nagpapanatili ng rem part sa gitnang bahagi, kaya lumalaki pa rin ang text kapag nag-zoom ang user sa 200% — na hindi mangyayari sa viewport-only na value.

Preview

Fluid na text, saktong-sakto ang sukat.

I-adjust ang mga sukat at lapad ng screen para hubugin ang value.

Ang kalkulasyon ay ganap na tumatakbo sa iyong browser. Walang anuman sa mga inilalagay mo rito ang ina-upload sa BroBroGo.

FAQ

Paano binuo ng calculator ang clamp() value?

Bibigyan mo ito ng dalawang punto: sukat sa maliit na lapad ng screen at sukat sa malaking lapad ng screen. Gagawa ito ng tuwid na linya sa pagitan ng mga ito upang ang sukat ay lumaki nang maayos habang lumalawak ang screen, pagkatapos ay babalutin ito sa clamp() upang hindi ito bumaba sa sukat ng iyong maliit na screen o tumaas sa sukat ng iyong malaking screen. Sa pagitan ng dalawang lapad, ang sukat ay nagbabago nang fluid; sa labas ng mga ito, nananatili ito sa pinakamalapit na limitasyon.

Bakit nasa rem at vw ang resulta sa halip na pixel?

Ang mga limitasyon ay nasa rem at ang nagbabagong gitnang bahagi ay nagpapanatili ng rem component, kaya lumalaki pa rin ang text kapag nag-zoom in ang mambabasa o tinaasan ang default na laki ng font ng kanilang browser — ang pixel- o viewport-only na value ay maaaring makasira sa paggana nito. Nagta-type ka ng mga sukat sa pixel dahil ganoon mag-isip ang karamihan sa mga tao, at kino-convert ito ng tool sa rem gamit ang iyong root font size.

Maaari ko ba itong gamitin para sa spacing, hindi lang para sa laki ng font?

Oo. Gumagana ang parehong value para sa padding, margin, gap, lapad o taas — kahit saan may haba. Lumipat sa Box preview upang makita ang paglaki ng spacing sa halip na text. Kung pareho ang iyong maliit at malaking sukat, ang resulta ay magiging isang plain fixed length, dahil walang kailangang i-scale.

Sinusuportahan ba ng lahat ng browser ang clamp()?

Oo — sinusuportahan na ng bawat kasalukuyang browser ang clamp() mula pa noong 2020, kaya maaari mong gamitin ang value nang direkta nang walang fallback. Sa napakalaking maximum o mabilis na pagbabago, mas mabuting suriin muna sa 200% zoom kung lumalaki pa rin ang text para sa mga mambabasang nangangailangan nito.

CSS Cubic Bezier GeneratorI-drag ang dalawang handle para hubugin ang easing curve, panoorin ang paggalaw ng dot kumpara sa steady na dot, at kopyahin ang cubic-bezier() value.Box Shadow GeneratorI-drag ang mga slider para humubog ng box-shadow, magpatong ng mga layer para sa lalim, at kopyahin ang natapos na CSS agad-agad.Gradient GeneratorBumuo ng linear, radial, o conic na gradient, magdagdag ng mga color stop at i-set ang direksyon, pagkatapos ay kopyahin ang CSS sa isang click lang.Border Radius GeneratorBilugin ang bawat sulok gamit ang mga slider, humubog ng mga organic blob gamit ang elliptical mode, at kopyahin ang CSS agad-agad.Flexbox GeneratorMag-set up ng flex container at ng mga item nito gamit ang mga visual na kontrol, panoorin ang reaksyon ng layout nang live, at kopyahin ang CSS sa isang click lang.CSS Grid GeneratorI-set ang iyong mga column at row, i-drag sa mga cell para maglagay ng mga item, at kopyahin ang grid CSS kasama ang katugmang HTML sa isang click lang.CSS Beautifier & MinifierI-reindent ang magulong CSS para madaling basahin, o i-minify para sa mas maliit na file — may safe mode na hindi kailanman nagbabago sa pagkakasunod-sunod ng iyong mga rule.px sa rem at em ConverterMag-convert sa pagitan ng px, rem, at em gamit ang sarili mong root at context font size — i-edit ang kahit anong field at ang dalawa pa ay mag-a-update habang nagta-type ka.