Что делает этот калькулятор?

Он рассчитывает выражение clamp() для CSS, которое плавно изменяет размер шрифта в зависимости от ширины экрана.

Зачем указывать базовый размер шрифта (Root Font Size)?

Он необходим для корректного перевода пикселей (px) в относительные единицы (rem), что важно для доступности интерфейса.

Можно ли использовать полученный clamp() для других свойств, кроме font-size?

Да, сгенерированное выражение подходит для любых CSS-свойств, поддерживающих плавное изменение, например padding или margin.

Что происходит за пределами указанных границ viewport?

Функция clamp() ограничивает размер шрифта: он не станет меньше минимального значения на экранах меньше minViewport и не превысит максимум на экранах больше maxViewport.

Нужны ли медиа-запросы при использовании clamp()?

Нет, функция clamp() автоматически и плавно масштабирует текст в реальном времени без использования @media.

Elysia Tools

Навигация

Design

Калькулятор clamp для fluid typography CSS

Введите границы viewport и шрифта, чтобы получить clamp(), готовый CSS и данные превью

Детали

С чем помогает этот инструмент

Считает наклон vw и смещение для fluid typography и возвращает clamp() и HTML-превью.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Подготовленные примеры запуска

Нажмите пример, чтобы автоматически заполнить форму. Файлы по-прежнему нужно загрузить.

1 примеров

Собрать clamp для заголовка

Строит плавный масштаб заголовка от 16px до 32px между 360px и 1440px.

{"clampExpression":"clamp(1rem, 0.6667rem + 1.4815vw, 2rem)"}

Ввод

Заполните нужные поля и запустите инструмент.

6 параметров

СодержимоеВставьте или введите основные значения.1

Текст превьюtextНеобязательно

НастройкиНастройте форматы, диапазоны, числа и режимы.5

Минимальный viewportnumberОбязательноМаксимальный viewportnumberОбязательноМинимальный размер шрифтаnumberОбязательноМаксимальный размер шрифтаnumberОбязательноБазовый размер шрифтаnumberНеобязательно

Результат

Готово к запуску

После запуска здесь появятся файлы, текст, структурированные данные или потоковый вывод.

Примеры

Примеры для этого инструмента

Связано

Калькулятор clamp для fluid typography CSS

С чем помогает этот инструмент

Запустить этот инструмент

Подготовленные примеры запуска

Ввод

Результат

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Подготовленные примеры запуска

Ввод

Результат

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Адаптивный заголовок для лендинга

2. Адаптивный текст для мобильного приложения

FAQ

Примеры CSS-фреймворка Bulma

Примеры CSS Фреймворка Milligram

Примеры CSS-селекторов

Примеры Tailwind CSS

Генератор меток синхронного чтения

Генератор JSON-LD из CSV

Пакетный генератор кодов

Экстрактор токенов темы ECharts

Инструменты CSS: Авторинг, Макеты и Каскад

Инструменты конвертации регистра, кодировки и нормализации текста

Инструменты Text

Инструменты анализа текста, читаемости и проверки содержания