Preskoči na vsebino
TextArray1.41.0
100% lokalno

CSS clamp() generator

Ustvari fluidno CSS clamp() vrednost, ki se nemoteno skalira med dvema širinama pogleda.

Izhod
Povezana orodja
Pretvornik enot CSSOrodja za razvijalce
Ekstraktor barv CSS spremenljivknovoOrodja za razvijalce
Kalkulator razmerja stranicOrodja za razvijalce
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
SQL v JSONOrodja za razvijalce
CSS clamp() generator
Fluidna tipografija in razmiki nemoteno skalirajo vrednost, ko se pogled spreminja, namesto da skočijo med fiksnimi velikostmi pri nekaj ogromnih točkah preloma. To orodje za vas ustvari to vrednost: vnesite najmanjšo in največjo velikost ter širini pogleda, pri katerih se uporabljata, in dobite CSS clamp() funkcijo s linearno interpolacijo vmes, pripravljeno za lepljenje v slog.
Najmanjša in največja velikost postavljata dva konca lestvice; najmanja in največja širina pogleda postavita, kje se vsak konec uporablja — pod najmanjšo širino vrednost ostane na svoji spodnji meji, nad največjo ostane na svoji zgornji meji, vmes pa linearno raste s pogledom. Enota izbira izhod med px in rem, pri čemer velikost korenske pisave nadzoruje px-na-rem pretvarjanje, decimalna mesta pa nadzorujejo natančnost generiranih števil. Oblika rezultata zavije isto clamp() kot navadna deklaracija, CSS lastna lastnost ali Tailwind poljubni razred, da ga lahko neposredno vstavite v katerikoli kodni projekt.
Zakljpučitev preverjanja dostopnosti doda opombo, ko bi nastava lahko povzročila težave: px-osnovna velikost ignorira privzeto velikost pisave brskalnika branja, najmanjša vrednost, ki je premajhna, pa ostane težko berljiva že pred začetkom skaliranja. Obe so pogoste napake v ročno napisanih formulah za fluidni tip, orodje pa jih označi namesto da jih pošlje tiho.
Vsega se izračuna v vašem brskalniku, ko prilagajate možnosti — ničesar, kar vnesete, ni poslano nikamor. Ko je rezultat videti kot treba, ga kopirajte, preuzmite kot datoteko .txt ali ga pošljite drugemu orodju v vhod, da nadaljujete z delom.
FAQ
Kaj dejansko počne clamp()?
clamp(min, preferred, max) izbere prednostno vrednost, vendar je nikoli ne pusti pod min ali nad max — tukaj prednostna vrednost linearno raste s širino pogleda, zato rezultat nemoteno skalira med vašima dvema točkama velikosti.
Zakaj izbrati rem namesto px?
Velikost na podlagi rem se skalira z velikostjo korenske pisave, zato še vedno spoštuje bralca, ki je spremenil privzeto velikost besedila v svojem brskalniku. Velikost na podlagi px ostane fiksna ne glede na to nastavitev, zato preverjanje dostopnosti to označi.
Za kaj je namenjena velikost korenske pisave?
To je px vrednost, ki jo 1rem predstavlja na strani, ki jo slogirате — 16 po privzeti nastavitvi v vsakem brskalniku, razen če vi ali reset slog ne spremenite. Orodje ga uporablja za pretvarjanje vaših px velikosti v natančne rem vrednosti.
Ali lahko neposredno uporabljam Tailwind rezultat v razredu razreda?
Da. To je popoln poljubni razred, kot je text-[clamp(1rem,0.8rem+1vw,2rem)] brez presledkov, kar je točno sintaksa, ki jo Tailwind pričakuje.
Ali se moj vhod prenese kamor koli?
Ne. Vse izračune se izvršijo v vašem brskalniku — številke, ki jih vnesete, nikoli ne zapustijo vašo napravo.