Калкулатор за CSS clamp()
Внесете големина за мали и големи екрани и добијте флуидна clamp() вредност што се скалира непречено помеѓу нив — за големини на фонтови, внатрешни и надворешни маргини или празнини.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Резултатот задржува дел во rem во средниот член, така што текстот сè уште се зголемува кога некој зумира на 200% — вредност само во viewport не би го овозможила тоа.
Флуиден текст, со совршена големина.
Пресметката се извршува целосно во Вашиот прелистувач. Ништо од она што го внесувате тука не се испраќа на BroBroGo.
ЧПП
Како калкулаторот ја гради вредноста clamp()?
Му давате две точки: големина при мала ширина на екранот и големина при голема ширина. Тој повлекува права линија меѓу нив, така што големината расте непречено како што се шири екранот, а потоа ја обвиткува во clamp() за никогаш да не падне под големината за мал екран или да не ја надмине големината за голем екран. Помеѓу двете ширини, големината се менува флуидно; надвор од нив, се задржува на најблиската граница.
Зошто резултатот е во rem и vw наместо во пиксели?
Границите се во rem, а променливиот среден дел задржува rem компонента, така што текстот сè уште расте кога читателот зумира или ја зголемува стандардната големина на фонтот во прелистувачот — вредност само во пиксели или viewport може да го спречи тоа да работи. Внесувате големини во пиксели бидејќи така повеќето луѓе размислуваат за нив, а алатката ги претвора во rem користејќи ја Вашата основна (root) големина на фонт.
Може ли да го користам ова за растојанија, а не само за големина на фонт?
Да. Истата вредност работи за padding, margin, gap, width или height — секаде каде што се користи должина. Префрлете го прегледот на „Рамка“ (Box) за да го гледате растојанието како расте наместо текстот. Ако Вашите мали и големи димензии се исти, резултатот се сведува на обична фиксна должина, бидејќи нема што да се скалира.
Дали сите прелистувачи поддржуваат clamp()?
Да — секој современ прелистувач поддржува clamp() уште од 2020 година, така што можете да ја користите вредноста таква каква што е, без алтернативни решенија. При многу голем максимум или брза стапка на промена, вреди набрзина да проверите при зум од 200% дали текстот сè уште се зголемува за читателите на кои им е потребно.