Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng Gumagawa ng CSS clamp()

Gumawa ng fluid na CSS clamp() na value para sa responsive na typography at spacing. Itakda ang min/max na laki at viewport range, tingnan ang live preview, at kopyahin ang one-line na CSS.

Gumagana offline kapag na-load na
Yunit ng output:
CSS na halaga
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind class
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px ang lapad β†’ 21.9px
Aa 22px

Na-render na laki sa iba't ibang viewport

375px ang lapadAa 16px
908px ang lapadAa 24px
1440px ang lapadAa 32px

Ang clamp(min, preferred, max) ay nagpapalaki o nagpapaliit ng halaga nang maayos ayon sa viewport, pagkatapos ay naka-lock sa min at max. Pinapalitan nito ang mga stack ng media query para sa typography, spacing, at lapad gamit ang isang linya.

Mga karaniwang gamit

  • Lumikha ng Fluid Responsive TypographyI-scale ang mga laki ng font nang maayos sa pagitan ng mobile at desktop na may isang linya.
  • Fluid Margins at PaddingGawing lumaki ang section spacing sa viewport sa halip na lumakad sa breakpoints.
  • Palitan ang Media Queries gamit ang clamp()Collapse stacks ng breakpoint overrides sa isang solong fluid value.
  • Bumuo ng Fluid Type ScaleLumikha ng consistent clamp() steps para sa isang design-system type scale.
  • Fluid Hero at Display HeadingsGawing mag-scale ang malalaking landing-page headlines nang dramatic ngunit ligtas.

Paano ito Gumagana

Kinakalkula ng tool na ito ang mga CSS clamp() value gamit ang hand-written na linear interpolation formula β€” walang library, walang server round-trip. Naglalagay ka ng dalawang laki at dalawang viewport width; agad tumatakbo ang math sa iyong browser at gumagawa ng clamp() expression na handang i-paste, na may vw-based na preferred value na maayos na nagsa-scale ng type o spacing mo sa pagitan ng mga breakpoint na iyon.

  1. 1
    Kalkulasyon ng linear slope
    Kinakalkula ng tool ang pixel-per-pixel na slope: (maxSize - minSize) / (maxViewport - minViewport). Kino-convert ang slope na ito sa vw unit sa pagpaparami sa 100, na siyang ubod ng kung paano gumagana ang CSS viewport-relative scaling.
  2. 2
    Pagkuha ng intercept
    Kinakalkula ang intercept offset (sa px o rem) para eksaktong tumama ang linear function sa minimum na laki mo sa minimum na viewport. Magkasamang binubuo ng slope at intercept ang preferred value sa loob ng clamp() β€” ang bahaging aktuwal na nagsa-scale.
  3. 3
    Unit conversion at pag-format ng output
    Kung rem output ang pipiliin mo, hinahati ang bawat pixel value sa naka-configure mong root font size (default 16px) bago isulat sa clamp() string. Gumagawa rin ng katugmang Tailwind arbitrary-value class, na pinapalitan ng underscore ang mga space ayon sa syntax ng Tailwind.
  4. 4
    Live na preview gamit ang viewport slider
    Hinahayaan ka ng isang range slider na mag-scrub mula 320px hanggang 1920px na lapad. Sa bawat posisyon, kinakalkula ng parehong slope-and-intercept formula ang clamped na laki nang real time at nagre-render ng sample text sa kinalkulang pixel size na iyon, kaya makikita mo ang pag-scale bago kumopya ng kahit ano.

Mga Kaugnay na Tool

🟦

Gumagawa ng CSS Grid

I-design nang visual ang CSS grid β€” tracks, units at gaps β€” at kopyahin ang generated CSS at HTML.

Subukan
πŸ“

Ano ang Screen Resolution Ko

Tingnan ang iyong screen resolution sa CSS at tunay na pixel, laki ng window, pixel ratio, colour depth, HDR, suporta sa pagpindot at refresh rate, at kopyahin ang lahat ng ito.

Subukan
Sikat
✍️

Gumagawa ng Pirma

Gumuhit ng pirma gamit ang mouse, daliri, o stylus, o i-type ang pangalan mo sa handwriting font, pagkatapos ay i-export bilang transparent na PNG o SVG.

Subukan

Mga Madalas na Itanong