CSS clamp() Калкулатор
Унесите величину за мале и велике екране и добијте флуидну clamp() вредност која се глатко прилагођава — за величину фонта, унутрашње и спољашње маргине или размаке.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Резултат задржава део у rem јединицама у средњем члану, тако да се текст и даље повећава када корисник зумира на 200% — што не би био случај са вредношћу која користи искључиво viewport јединице.
Флуидан текст, савршено одмерен.
Прорачун се у потпуности извршава у вашем прегледачу. Ништа што овде унесете не шаље се на BroBroGo.
Честа питања
Како калкулатор генерише clamp() вредност?
Ви дефинишете две тачке: величину на малој ширини екрана и величину на великој ширини екрана. Калкулатор исцртава праву линију између њих тако да се величина глатко повећава како се екран шири, а затим је умотава у функцију clamp() како вредност никада не би пала испод ваше минималне нити прешла максималну величину. Између ове две ширине вредност се флуидно прилагођава, а ван њих остаје на најближој граничној вредности.
Зашто је резултат у rem и vw јединицама уместо у пикселима?
Граничне вредности су изражене у rem јединицама, а променљиви средњи део задржава rem компоненту како би се текст повећавао када корисник зумира или промени подразумевану величину фонта у прегледачу. Уносите димензије у пикселима јер је то најинтуитивније, а алат их конвертује у rem на основу ваше основне (root) величине фонта.
Могу ли ово користити и за размаке, а не само за величину фонта?
Да. Иста вредност ради за padding, margin, gap, ширину или висину — било где где се користи дужина. Пребаците приказ на „Оквир” (Box) да бисте посматрали како се размак мења уместо текста. Ако су ваша минимална и максимална величина исте, резултат се своди на обичну фиксну дужину јер нема шта да се скалира.
Да ли сви прегледачи подржавају clamp()?
Да — сви модерни веб прегледачи подржавају clamp() још од 2020. године, тако да вредност можете користити без алтернативних решења (fallback). Код веома великих максималних вредности или брзих промена, препоручује се брза провера на зуму од 200% како бисте се уверили да се текст и даље исправно повећава за кориснике којима је то потребно.