Slaan oor na hoofinhoud
LibraTool logoLibraTool

Gratis CSS klem() Generator

Genereer 'n vloeibare CSS clamp() waarde vir responsiewe tipografie en spasiëring. Stel minimum/maksimum grootte en kykpoortreeks, sien 'n regstreekse voorskou, en kopieer die eenreël CSS.

Werk vanlyn sodra gelaai
Uitvoereenhede:
CSS-waarde
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind-klas
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px breed → 21.9px
Aa 22px

Weergegee grootte by verskillende kykvelde

375px breedAa 16px
908px breedAa 24px
1440px breedAa 32px

clamp(min, preferred, max) skaal 'n waarde vloeiend met die kykveld en sluit dan by die min en maks. Dit vervang stapels media-navrae vir tipografie, spasiëring en breedtes met 'n enkele reël.

Algemene gebruike

  • Skep vloebare responsiewe tipografieSkakel lettertipes glad tussen selfoon en lessenaar met een lyn.
  • Vloebare marges en opvullingMaak seksiespapasering groei met die blaadjie in stede van by breekpunte te spring.
  • Vervang mediaversoeke met clamp()Verkort stapels van breekpuntoorskrywings in 'n enkele vloebare waarde.
  • Bou 'n vloebare tipeskaGenereer konsekwente clamp()-stappe vir 'n ontwerpsisteem-tipeska.
  • Vloebare held en vertoontitelsMaak groot landingsbladsy-titels dramaties skakel maar veilig.

Hoe dit werk

Hierdie nutsprogram bereken CSS clamp()-waardes met 'n handgeskrewe liniêre-interpolasieformule — geen biblioteke, geen bediener-heen-en-weer nie. Jy voer twee groottes en twee kykskermwydtes in; die wiskunde loop oombliklik in jou blaaier en produseer 'n gereed-om-te-plak clamp()-uitdrukking met 'n vw-gebaseerde voorkeurwaarde wat jou tipe of spasiëring glad tussen daardie breekpunte skaleer.

  1. 1
    Liniêre helling-berekening
    Die nutsprogram bereken 'n pixel-per-pixel-helling: (maksGrootte - minGrootte) / (maksKykskerm - minKykskerm). Hierdie helling word dan na vw-eenhede omgeskakel deur met 100 te vermenigvuldig, wat die kern is van hoe CSS-kykskerm-relatiewe skalering werk.
  2. 2
    Afsny-afleiding
    'n Afsnyverskuiwing (in px of rem) word bereken sodat die liniêre funksie presies jou minimum grootte by die minimum kykskerm tref. Saam vorm helling en afsny die voorkeurwaarde binne clamp() — die deel wat werklik skaleer.
  3. 3
    Eenheidomskakeling en uitsetformatering
    As jy rem-uitset kies, word elke pixel-waarde deur jou geconfigureerde wortel-lettertipegrootte (verstek 16px) gedeel voordat dit in die clamp()-string geskryf word. 'n Passende Tailwind-arbitrêre-waarde-klas word ook geproduseer, met spasies deur onderstrepe vervang volgens Tailwind se sintaksis.
  4. 4
    Lewendige kykskerm-skuiwer-voorskou
    'n Reikskuiwer laat jou van 320px na 1920px wyd vryf. By elke posisie evalueer dieselfde helling-en-afsny-formule die vasgeklemde grootte intyds en render voorbeeldteks teen daardie berekende pixel-grootte, sodat jy die skaleringsgedrag kan sien voordat jy enigiets kopieer.

Verwante gereedskap

🟦

CSS Grid-kragopwekker

Ontwerp 'n CSS-rooster visueel — spore, eenhede en gate — en kopieer die gegenereerde CSS en HTML.

Probeer dit
📐

Wat Is My Skermresolusie

Sien jou skermresolusie in CSS en werklike piksels, venstergrootte, pikselverhouding, kleurdiepte, HDR, raakondersteuning en ververstempo, en kopieer dit alles.

Probeer dit
Gewild
✍️

Handtekening-Maker

Teken 'n handtekening met jou muis, vinger, of stylus, of tik jou naam in 'n handskriflettertipe, voer dit dan uit as 'n deursigtige PNG of SVG.

Probeer dit

Gereelde vrae