Генератор clamp() для плавних відступів
Обчисліть справжнє плавне значення CSS clamp() за мінімальним і максимальним розмірами для двох ширин вікна перегляду з покроковим показом кутового коефіцієнта, перетину та живим попереднім переглядом зі зміною розміру.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
CSS clamp() працює точно так само для відступів, як і для розміру шрифту — властивість просто виявляється margin, padding або gap замість font-size. Ця сторінка відкриває калькулятор із діапазоном від 8px до 32px для вікна шириною від 320px до 1280px, що є поширеним кроком для відступів секцій або проміжків між картками, які повинні бути компактними на телефоні й просторими на комп’ютері без жодного медіа-запиту.
Основна математика не залежить від того, що означають числа: та сама формула кутового коефіцієнта та перетину з віссю Y, яка створює плавний розмір заголовка, створює й плавне значення відступу, тому нижче наведено розклад, який точно показує, як 8px і 32px перетворюються на готовий до копіювання рядок clamp() для padding: clamp(...).
Перетягніть повзунок ширини вікна перегляду, щоб попередньо оцінити, як відчуватиметься відступ за будь-якої ширини між двома контрольними точками, відрегулюйте мінімальне та максимальне значення для щільнішого або вільнішого діапазону та скопіюйте готовий рядок прямо в ту властивість відступу, яка його потребує.