Přeskočit na hlavní obsah
LibraTool logoLibraTool

Generátor CSS clamp() zdarma

Generujte plynulou hodnotu CSS clamp() pro responzivní typografii a mezery. Nastavte minimální/maximální velikost a rozsah viewportu, zobrazte živý náhled a zkopírujte jednořádkové CSS.

Funguje offline po načtení
Výstupní jednotka:
Hodnota CSS
font-size: clamp(1rem, 1.5023vw + 0.6479rem, 2rem);
Tailwind třída
text-[clamp(1rem,1.5023vw_+_0.6479rem,2rem)]
768px šíře → 21.9px
Aa 22px

Vykreslená velikost při různých viewportech

375px šířeAa 16px
908px šířeAa 24px
1440px šířeAa 32px

clamp(min, preferred, max) plynule škáluje hodnotu s viewportem a pak ji zafixuje na minimu a maximu. Nahrazuje sadu media queries pro typografii, mezery a šířky jediným řádkem.

Běžná použití

  • Vytvořte plynulou responzivní typografiiPlynule škálujte velikosti písem mezi mobilem a desktopem s jedním řádkem.
  • Plynulé okraje a výplňNechte roztahovací vzdálenost se zvětšit s oknem zobrazení místo skákání v bodech přerušení.
  • Nahraďte mediální dotazy pomocí clamp()Sbalte zásobníky přepsání bodů přerušení do jedné plynulé hodnoty.
  • Vytvořte plynulou typografickou stupniciGenerujte konzistentní kroky clamp() pro typografickou stupnici systému navrhování.
  • Plynulé hrdinské a displejové nadpisyNechte velké nadpisy cílové stránky škálovat dramaticky, ale stále bezpečně.

Jak to funguje

Tento nástroj počítá hodnoty CSS clamp() pomocí ručně napsaného vzorce lineární interpolace — bez knihoven, bez zpáteční cesty na server. Zadáte dvě velikosti a dvě šířky viewportu; matematika běží okamžitě ve vašem prohlížeči a vytváří výraz clamp() připravený ke vložení, s preferovanou hodnotou založenou na vw, která plynule škáluje písmo nebo mezery mezi těmito zlomovými body.

  1. 1
    Výpočet lineárního sklonu
    Nástroj počítá sklon na pixel: (maxVelikost - minVelikost) / (maxViewport - minViewport). Tento sklon se poté převede na jednotky vw vynásobením 100, což je jádrem toho, jak funguje škálování CSS relativní k viewportu.
  2. 2
    Odvození posunu
    Posun (v px nebo rem) se počítá tak, aby lineární funkce zasáhla přesně vaši minimální velikost při minimálním viewportu. Společně sklon a posun tvoří preferovanou hodnotu uvnitř clamp() — část, která se skutečně škáluje.
  3. 3
    Převod jednotek a formátování výstupu
    Pokud zvolíte výstup v rem, každá pixelová hodnota se před zápisem do řetězce clamp() vydělí vaší nastavenou velikostí kořenového písma (výchozí 16px). Vytváří se také odpovídající třída Tailwind s libovolnou hodnotou, přičemž mezery jsou nahrazeny podtržítky podle syntaxe Tailwindu.
  4. 4
    Živý náhled posuvníku viewportu
    Posuvník rozsahu umožňuje procházet od 320px do 1920px šířky. Na každé pozici stejný vzorec sklonu a posunu vyhodnotí omezenou velikost v reálném čase a vykreslí ukázkový text v této vypočítané pixelové velikosti, takže před kopírováním čehokoli vidíte chování škálování.

Související nástroje

🟦

Generátor CSS Grid

Vizuálně navrhněte CSS grid — stopy, jednotky a mezery — a zkopírujte vygenerovaný CSS a HTML.

Vyzkoušet
📐

Jaké je rozlišení mé obrazovky

Podívejte se na rozlišení své obrazovky v CSS a skutečných pixelech, velikost okna, poměr pixelů, barevnou hloubku, HDR, podporu dotyku a obnovovací frekvenci a vše zkopírujte.

Vyzkoušet
Trendy
✍️

Tvůrce podpisu

Nakreslete podpis myší, prstem nebo stylusem, nebo napište své jméno v písmu napodobujícím rukopis, a poté jej exportujte jako průhledné PNG nebo SVG.

Vyzkoušet

Časté dotazy