Генератор clamp() для плавного розміру шрифту
Обчисліть справжнє плавне значення CSS clamp() за мінімальним і максимальним розмірами для двох ширин вікна перегляду з покроковим показом кутового коефіцієнта, перетину та живим попереднім переглядом зі зміною розміру.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває калькулятор із уже заповненим універсальним налаштуванням плавного розміру шрифту: 16px при ширині вікна 320px до 24px при ширині 1280px. Це зручний діапазон від звичайного тексту до трохи більшого, який плавно масштабується від типового екрана телефону до типового вікна комп’ютера, і саме це налаштування мають на увазі більшість людей, коли шукають плавний розмір шрифту clamp().
Чотири числа можна змінювати: збільште максимальний розмір для заголовка замість основного тексту або звужте діапазон ширини вікна, якщо дизайн повинен змінюватися лише між контрольними точками планшета та комп’ютера. Що б ви не ввели, кутовий коефіцієнт і перетин з віссю Y перераховуються тим самим способом і показуються як явна арифметика, а не приховані всередині кінцевого рядка.
Під чотирма полями введення повзунок ширини вікна перегляду керує живим попереднім переглядом, тож масштабування видно одразу, а готовий до копіювання рядок clamp() — на відстані одного кліку. Перемикання одиниці виводу між rem і px перераховує кожне число, не змінюючи самі значення мінімального та максимального розмірів.