Генератор CSS clamp()
Генеруйте плавне значення CSS clamp(), яке масштабується між двома шириною viewport.
Генератор CSS clamp()
Плавна типографія та відступи масштабують значення в міру зміни розміру viewport, замість стрибків між фіксованими розмірами на кількох точках контролю медіа-запитів. Цей інструмент будує це значення за вас: введіть мінімальний і максимальний розмір та ширину viewport, де вони застосовуються, і він повернеме функцію CSS clamp() з лінійною інтерполяцією між ними, готову вставити в таблицю стилів.
Мінімальний розмір та максимальний розмір встановлюють два кінці шкали; мінімальна та максимальна ширина viewport визначають, де кожний кінець починає діяти — нижче мінімальної ширини значення залишається на своєму мінімумі, вище максимуму залишається на своїй стелі, а між ними зростає лінійно з viewport. Одиниця виміру перемикає вивід між px та rem, розмір кореневого шрифту керує перетворенням px-в-rem, а кількість десяткових знаків контролює точність створених чисел. Формат виведення обгортає той же clamp() як звичайне оголошення, властивість CSS користувача або клас Tailwind з довільним значенням, щоб ви могли вставити його прямо в будь-яку кодову базу, з якою працюєте.
Вмикання перевірки доступності додає примітку, коли налаштування може спричинити проблеми: розміри на основі px ігнорують перевагу розміру шрифту браузера читача, а занадто малий мінімум залишається важким для читання навіть до того, як почне масштабуватися. Обидва це поширені помилки в ручних формулах плавного типу, і інструмент позначає їх замість тихої відправки.
Все обчислюється у вашому браузері в міру налаштування опцій — ніщо, що ви вводите, не надсилається нікуди. Коли результат виглядає правильно, скопіюйте його, завантажте як файл .txt або відправте у введення іншого інструмента, щоб продовжити роботу над ним.