Генератор CSS clamp()

Що таке Генератор CSS clamp()?

Генератор CSS clamp() — це безкоштовний калькулятор адаптивної типографіки для фронтенд-розробників і дизайнерів. Ви задаєте мінімальний розмір шрифту, максимальний розмір шрифту, мінімальну ширину вʼюпорта та максимальну ширину вʼюпорта; він повертає оголошення clamp(min, preferred, max), де бажане значення поєднує зсув у rem із нахилом у vw, тож текст зростає лінійно разом з екраном і ніколи не виходить за ваші межі. Це позбавляє від нашарування медіазапитів font-size і зберігає адаптивність заголовків та основного тексту на будь-якому пристрої. Виберіть розмір попереднього перегляду, щоб побачити, як відображається значення, перемкніть одиницю виводу між rem і px та скопіюйте рядок прямо у свою таблицю стилів.

Як користуватися Генератор CSS clamp()

1. Введіть мінімальний розмір шрифту — розмір, який текст повинен мати на найменшому екрані.
2. Введіть максимальний розмір шрифту — розмір, якого текст має досягати на найбільшому екрані.
3. Задайте мінімальну та максимальну ширину вʼюпорта, між якими має масштабуватися розмір.
4. Відкрийте налаштування, щоб за бажанням змінити одиницю виводу (rem лишається доступним для людей з обмеженнями; px також доступний).
5. Виберіть розмір попереднього перегляду, щоб відрендерити приклад тексту за цього вʼюпорта, і зчитайте значення clamp() у реальному часі.
6. Скопіюйте згенерований вираз clamp() і вставте його у властивість font-size у CSS.

Приклади

мін. шрифт 16, макс. шрифт 20, мін. vw 320, макс. vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

мін. шрифт 32, макс. шрифт 64, мін. vw 320, макс. vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

мін. шрифт 12, макс. шрифт 14, мін. vw 480, макс. vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Поширені запитання

Як значення clamp() масштабується без медіазапитів?

clamp(min, preferred, max) приймає нижню межу, бажане (плавне) значення та верхню межу. Бажане значення — це пряма вигляду rem + vw, обчислена так, щоб шрифт дорівнював вашому мінімуму за мінімального вʼюпорта і вашому максимуму за максимального вʼюпорта. Між цими значеннями ширини браузер інтерполює автоматично, а поза ними clamp() фіксує розмір на найближчій межі — і все це в одному оголошенні.

Чому вивід у rem, а не в px?

Використання rem для фіксованих частин враховує налаштування розміру шрифту у браузері користувача, що краще для доступності. Нахил, що залежить від вʼюпорта, виражається у vw. Ви можете перемкнути одиницю на px у налаштуваннях, якщо вашому проєкту потрібні абсолютні одиниці, але rem — рекомендоване значення за замовчуванням.

Який діапазон вʼюпорта мені використовувати?

Поширений вибір — ваша найменша підтримувана ширина (часто 320px або 360px) для мінімуму та ваш найширший контейнер контенту (наприклад, 1240px–1536px) для максимуму. Шрифт повністю плавний лише в межах цього діапазону; нижче нього текст лишається на мінімумі, а вище — на максимумі.

Чи працює це для будь-якої довжини в CSS, а не лише для font-size?

Так. Згенероване значення clamp() — це просто довжина, тож ви можете вставити його в padding, margin, gap або будь-яку властивість, що приймає довжину. Мітки згадують font-size, бо адаптивна типографіка — найпоширеніше застосування, але для відступів математика ідентична.

Чи надсилаються мої дані кудись?

Ні. Обчислення повністю виконується у вашому браузері на JavaScript — ваші розміри шрифту та ширини вʼюпорта ніколи не завантажуються на жоден сервер, тож інструмент працює конфіденційно й навіть офлайн після завантаження сторінки.