CSS Clamp() Калкулатор

CSS clamp(MIN, PREFERRED, MAX) позволява една декларация да замести цял набор от media queries: стойността остава MIN под най-малката ширина на изгледа, MAX над най-голямата и се мащабира плавно между тях. Трудната част е членът PREFERRED — израз, относителен към изгледа, като 0.833rem + 0.833vw — който никой не иска да извежда на ръка. Този калкулатор го изчислява наистина от четири числа: минимален размер, максимален размер и ширината на изгледа, при която всяко от тях се прилага.

Показани са всички междинни числа, не само крайният ред: наклонът (колко размерни единици нараства стойността за пиксел от изгледа), същият този наклон, изразен като vw коефициент, и пресечната точка с оста Y — константата, добавена към vw члена, така че правата да минава точно през двете посочени точки. Всеки, който е поставял clamp() стойност от урок, без да я разбира, може да види и провери истинската аритметика тук.

Плъзгач за ширина на изгледа управлява визуализация на живо, така че плавното мащабиране се вижда, а не само се изчислява: плъзнете го между минималната и максималната точка на прекъсване и гледайте как примерният текст се преоразмерява точно както би ставало при преоразмеряване на прозорец на истински браузър. Изходният ред и разбивката се обновяват при всяко натискане на клавиш — това се съчетава естествено с конвертора от px към rem, когато самият основен размер на шрифта също се нуждае от преобразуване.

Превключете в режим за типографска скала за цялостна плавна типографска система на една стъпка: въведете основен размер и модулно отношение (1.125 до 1.5) и получете шест размера — small, base, h4, h3, h2 и h1 — всеки изчислен като собствен clamp() ред между по-нежна прогресия за мобилни устройства и пълното десктоп отношение, готов за копиране като блок от CSS custom properties.