Бесплатен Генератор на CSS clamp()

Како функционира

Оваа алатка пресметува вредности за CSS clamp() користејќи рачно напишана формула за линеарна интерполација — без библиотеки, без комуникација со сервер. Внесувате две големини и две ширини на прегледник; математиката работи моментално во вашиот прелистувач и произведува готов clamp() израз за залепување со преферирана вредност базирана на vw што ги скалира вашиот текст или растојание мазно помеѓу тие точки на прекин.

1. 1
   Пресметка на линеарен наклон

   Алатката пресметува наклон пиксел-по-пиксел: (maxSize - minSize) / (maxViewport - minViewport). Овој наклон потоа се конвертира во vw единици со множење со 100, што е основата на тоа како работи CSS скалирањето релативно на прегледникот.
2. 2
   Изведување на пресекот

   Отстапување на пресек (во px или rem) се пресметува така што линеарната функција точно ја погодува вашата минимална големина при минималната ширина на прегледникот. Заедно, наклонот и пресекот ја формираат преферираната вредност внатре во clamp() — делот кој всушност се скалира.
3. 3
   Конверзија на единици и форматирање на излезот

   Ако изберете rem излез, секоја вредност во пиксели се дели со конфигурираната основна големина на фонт (стандардно 16px) пред да се запише во низата clamp(). Се произведува и соодветна Tailwind класа со произволна вредност, со празни места заменети со долни црти според синтаксата на Tailwind.
4. 4
   Преглед со лизгач за прегледник во живо

   Лизгач со опсег ви овозможува да навигирате од 320px до 1920px ширина. На секоја позиција истата формула наклон-и-пресек ја пресметува ограничената големина во реално време и исцртува примерок текст со таа пресметана големина во пиксели, така што можете да го видите однесувањето на скалирањето пред да копирате нешто.

Поврзани алатки