Preskoči na glavno vsebino
LibraTool logoLibraTool

Generator CSS clamp() — brezplačno

Ustvarite tekočo vrednost CSS clamp() za odzivno tipografijo in razmike. Nastavite minimalno/maksimalno velikost in obseg vidnega polja, oglejte si živi predogled in kopirajte enolinijski CSS.

Deluje brez povezave po nalaganju
Izhodna enota:
CSS vrednost
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind razred
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px širina → 21.9px
Aa 22px

Prikazana velikost pri različnih širinah zaslona

375px širinaAa 16px
908px širinaAa 24px
1440px širinaAa 32px

clamp(min, preferred, max) tekočno prilagaja vrednost glede na zaslon in jo zaklene pri min. in maks. Nadomesti sklope medijskih poizvedb za tipografijo, razmike in širine z eno vrstico.

Pogosta področja uporabe

  • Ustvarite tekočo odzivno tipografijoGladko skalilirajte velikosti pisave med mobilno in namizno z eno vrstico.
  • Tekočine robni črti in polnjenjaNaredite razporeditev odseka raste z očmi namesto skakanja pri prelomih.
  • Zamenjajte medijske poizvedbe s clamp()Zvrnite kupe prelomnega overrida v eno tekočo vrednost.
  • Ustvarite tekočo tipsko lestvicoGenerirajte skladne korake clamp() za lestvico tipa sistema dizajna.
  • Tekočine junak in prikazani nasloviNaredite velike naslove ciljne strani kampanje dramatično, vendar varno skalirati.

Kako deluje

To orodje izračuna vrednosti CSS clamp() z uporabo ročno napisane formule linearne interpolacije — brez knjižnic, brez povratnih potovanj na strežnik. Vnesete dve velikosti in dve širini ogleda; matematika teče takoj v vašem brskalniku in ustvari za lepljenje pripravljen izraz clamp() s prednostno vrednostjo na osnovi vw, ki gladko skalira vaše pisave ali razmike med tema prelomnima točkama.

  1. 1
    Izračun linearnega naklona
    Orodje izračuna naklon piksel na piksel: (maksVelikost - minVelikost) / (maksOgled - minOgled). Ta naklon se nato pretvori v enote vw z množenjem s 100, kar je jedro tega, kako deluje CSS skaliranje glede na ogled.
  2. 2
    Izpeljava presečišča
    Odmik presečišča (v px ali rem) se izračuna tako, da linearna funkcija natanko zadene vašo minimalno velikost pri minimalnem ogledu. Skupaj naklon in presečišče tvorita prednostno vrednost znotraj clamp() — del, ki se dejansko skalira.
  3. 3
    Pretvorba enot in oblikovanje izpisa
    Če izberete izpis rem, se vsaka vrednost v pikslih deli z vašo nastavljeno korensko velikostjo pisave (privzeto 16px), preden se zapiše v niz clamp(). Ustvari se tudi ujemajoč razred Tailwind s poljubno vrednostjo, s presledki, zamenjanimi s podčrtaji po skladnji Tailwind.
  4. 4
    Živ predogled drsnika ogleda
    Drsnik range vam omogoča premikanje od 320px do 1920px širine. Na vsaki poziciji ista formula naklona in presečišča v realnem času ovrednoti omejeno velikost in izriše vzorčno besedilo pri tej izračunani velikosti v pikslih, tako da vidite obnašanje skaliranja pred kopiranjem česar koli.

Sorodna orodja

🟦

Generator CSS Grid

Vizuelno oblikujte CSS mrežo — sledenje, enote in vrzeli — in kopirajte generirani CSS in HTML.

Poskusite
📐

Kakšna je ločljivost mojega zaslona

Oglejte si ločljivost zaslona v CSS in dejanskih slikovnih pikah, velikost okna, razmerje slikovnih pik, barvno globino, HDR, podporo za dotik in hitrost osveževanja ter vse kopirajte.

Poskusite
V trendu
✍️

Ustvarjalnik podpisov

Narišite podpis z miško, prstom ali pisalom, ali natipkajte svoje ime v pisavi za rokopis, nato ga izvozite kot prosojen PNG ali SVG.

Poskusite

Pogosto zastavljena vprašanja