Fluid Spacing Clamp() Генератор
Изчислете реална плавна стойност на CSS clamp() от минимален и максимален размер в две ширини на прозореца за изглед, като наклонът и пресечната точка се показват стъпка по стъпка и визуализация на преоразмеряване на живо.
Резултат
CSS clamp() works exactly the same way for spacing as it does for font size — the property just happens to be margin, padding or gap instead of font-size. Тази страница отваря калкулатора с диапазон от 8px до 32px в прозорец за изглед от 320px до 1280px, обичайна стъпка за подпълване на секции или празнини на карти, които трябва да се чувстват стегнати на телефон и просторни на настолен компютър, без да се вижда медийна заявка.
Основната математика не се интересува какво представляват числата: същият наклон и формула за пресичане на y-ос, която произвежда течен размер на заглавието, произвежда течна стойност на разстоянието, така че разбивката по-долу показва как точно 8px и 32px се превръщат в готова за копиране линия clamp() за подплата: clamp(...).
Плъзнете плъзгача за ширина на прозореца за изглед, за да видите как ще се чувства разстоянието при всяка ширина между двете точки на прекъсване, коригирайте минималните и максималните стойности за по-тесен или по-свободен диапазон и копирайте завършената линия направо в кое свойство за разстояние се нуждае от него.