Aqbeż għall-kontenut ewlieni
LibraTool logoLibraTool

Ġeneratur CSS clamp() b'xejn

Iġġenera valur CSS clamp() fluwidu għal tipografija u ispazjar responsivi. Issettja d-daqs minimu/massimu u l-firxa tal-viewport, ara preview ħaj, u ikkopja l-CSS f'linja waħda.

Jaħdem offline ladarba mgħobbi
Unità tal-output:
Valur CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Klassi Tailwind
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px wisgħa → 21.9px
Aa 22px

Daqs irrenderizzat fuq viewports differenti

375px wisgħaAa 16px
908px wisgħaAa 24px
1440px wisgħaAa 32px

clamp(min, preferred, max) jiskalata valur b'mod fluwidu mal-viewport, imbagħad jiċċekken fil-min u l-max. Jissostitwixxi pileups ta' media queries għat-tipografija, l-ispazju u l-wiesagħ b'linja waħda.

Użi komuni

  • Oħloq Fluid Responsive TypographySkalizza font sizes smoothly bejn mobile u desktop b'linji waħda.
  • Fluid Margins u PaddingAgħmel sezzjoni spacing tikber mal-viewport minflok ma taqfaż il-breakpoints.
  • Ibdel Media Queries bi clamp()Qlibbez stacks ta breakpoint overrides fi valur flwidi waħda.
  • Ibni Fluid Type ScaleIġġenera clamp() steps konsistenti għal design-system type scale.
  • Fluid Hero u Display HeadingsAgħmel il-headline ta landing-paġna kbir skalizza drammatikament pero sagħtament.

Kif Taħdem

Din l-għodda tikkalkula valuri CSS clamp() bl-użu ta' formula ta' interpolazzjoni lineari miktuba bl-idejn — l-ebda librerija, l-ebda round-trips lil server. Iddaħħal żewġ daqsijiet u żewġ wisgħat ta' viewport; il-matematika taħdem minnufih fil-browser tiegħek u tipproduċi espressjoni clamp() lesta biex titwaħħal b'valur preferut ibbażat fuq vw li jiskala t-tip jew l-ispazjar tiegħek b'mod ħafif bejn dawk il-punti ta' waqfien.

  1. 1
    Kalkolu tal-inklinazzjoni lineari
    L-għodda tikkalkula inklinazzjoni ta' pixel-kull-pixel: (maxSize - minSize) / (maxViewport - minViewport). Din l-inklinazzjoni mbagħad tiġi konvertita f'unitajiet vw billi tiġi multiplikata b'100, li huwa l-qalba ta' kif jaħdem l-iskalar relattiv tal-viewport tas-CSS.
  2. 2
    Deriviazzjoni tal-intercept
    Offset ta' intercept (f'px jew rem) jiġi kkalkulat biex il-funzjoni lineari tolqot eżatt id-daqs minimu tiegħek fil-viewport minimu. Flimkien, l-inklinazzjoni u l-intercept jiffurmaw il-valur preferut ġewwa clamp() — il-parti li verament tiskala.
  3. 3
    Konverżjoni tal-unità u formattazzjoni tal-ħruġ
    Jekk tagħżel ħruġ rem, kull valur ta' pixel jiġi maqsum bid-daqs tal-font root konfigurat tiegħek (prestabbilit 16px) qabel ma jinkiteb fl-istring clamp(). Klassi ta' valur arbitrarju li taqbel ta' Tailwind tiġi wkoll prodotta, bl-ispazji sostitwiti b'underscores skont is-sintassi ta' Tailwind.
  4. 4
    Anteprima ħajja tas-slajder tal-viewport
    Slajder ta' medda jħallik tiskrolja minn 320px sa 1920px wesgħa. F'kull pożizzjoni l-istess formula ta' inklinazzjoni-u-intercept tivvaluta d-daqs klampjat f'ħin reali u tirrendja test kampjun f'dak id-daqs tal-pixel ikkalkulat, biex tara l-imġieba tal-iskalar qabel tikkopja xejn.

Għodod Relatati

🟦

Ġeneratur tas-CSS Grid

Iddisinja CSS grid viżwalment — tracks, units u gaps — u kopja l-CSS u HTML ġenerati.

Ipprova
📐

X'inhi r-Riżoluzzjoni tal-Iskrin Tiegħi?

Ara r-riżoluzzjoni tal-iskrin tiegħek f'CSS u f'pixels reali, id-daqs tat-tieqa, il-pixel ratio, il-fond tal-kulur, l-HDR, l-appoġġ għat-touch u r-refresh rate, u kkopja kollox.

Ipprova
Popolari
✍️

Għamil tal-Firem

Iddisinja firma bil-maws, subgħajk, jew stylus tiegħek, jew ittajpja ismek f'font tal-kaligrafija, imbagħad esportaha bħala PNG jew SVG trasparenti.

Ipprova

Mistoqsijiet Frekwenti