Kalkulačka CSS clamp()
Zadejte velikost pro malé a velké obrazovky a získejte plynulou hodnotu clamp(), která se mezi nimi hladce přizpůsobuje – pro velikost písma, výplně, okraje nebo mezery.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Výsledek si zachovává část v jednotkách rem v prostředním členu, takže se text při přiblížení na 200 % stále zvětšuje – hodnota založená pouze na viewportu by to neumožnila.
Plynulý text, přesně akorát.
Výpočet probíhá zcela ve vašem prohlížeči. Nic z toho, co zde zadáte, se neodesílá na servery BroBroGo.
Časté dotazy
Jak kalkulačka sestavuje hodnotu clamp()?
Zadáte dva body: velikost při malé šířce obrazovky a velikost při velké šířce. Kalkulačka mezi nimi vykreslí přímku, takže velikost plynule roste s šířkou obrazovky, a pak ji zabalí do funkce clamp(), aby nikdy neklesla pod velikost pro malou obrazovku ani nepřesáhla velikost pro velkou obrazovku. Mezi těmito dvěma šířkami se velikost plynule přizpůsobuje; mimo ně se drží na nejbližším limitu.
Proč je výsledek v rem a vw namísto pixelů?
Limity jsou v jednotkách rem a měnící se prostřední část si zachovává složku rem, takže se text stále zvětšuje, když si čtenář přiblíží stránku nebo zvýší výchozí velikost písma v prohlížeči – hodnota v pixelech nebo pouze ve viewportu (vw) by to mohla narušit. Velikosti zadáváte v pixelech, protože tak o nich většina lidí uvažuje, a nástroj je převádí na rem pomocí vaší výchozí velikosti písma (root).
Mohu to použít i pro rozestupy, nejen pro velikost písma?
Ano. Stejnou hodnotu lze použít pro padding, margin, gap, šířku nebo výšku – kdekoli, kde se používá délka. Přepněte náhled na Box a sledujte, jak se místo textu zvětšují rozestupy. Pokud jsou vaše malá a velká velikost stejné, výsledek se zjednoduší na běžnou pevnou délku, protože není co škálovat.
Podporují všechny prohlížeče funkci clamp()?
Ano – všechny moderní prohlížeče podporují clamp() od roku 2020, takže můžete hodnotu nasadit přímo bez záložního řešení. Při velmi velkém maximu nebo rychlém tempu změny je vhodné při 200% přiblížení rychle zkontrolovat, zda se text stále zvětšuje pro čtenáře, kteří to potřebují.