Калькулятор CSS clamp
Генерирует плавную типографику или отступы между границами области просмотра.
Как использовать Калькулятор CSS clamp
CSS clamp calculator creates a clamp() value that scales a font size or spacing linearly between a minimum and maximum pixel size across a viewport range. Enter both sizes and both viewport widths, which default to 16 to 32 px between 320 and 1280 px viewports, and get a calc() expression combining px and vw plus a live text preview.
- Введите запрошенные значения в панели настроек.
- Настройте основные параметры, затем откройте расширенный режим для экспорта и точной настройки. Пользовательские настройки остаются активными при закрытии панели.
- Запустите «Калькулятор CSS clamp», просмотрите результат и используйте доступные элементы копирования или скачивания.
Что поддерживает этот инструмент
Генерирует плавную типографику или отступы между границами области просмотра.
- Минимальный размер шрифта / отступа (px)
- Range: 0 to 1000
- Максимальный размер шрифта / отступа (px)
- Range: 0 to 1000
- Минимальная область просмотра (px)
- Range: 1 to 10000
- Максимальная область просмотра (px)
- Range: 1 to 10000
Ограничения и обработка
Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.
Частые вопросы
How do I calculate a fluid font size with CSS clamp?
The slope is the size difference divided by the viewport difference. The middle value becomes an intercept in px plus the slope times 100 in vw, so the size reaches the minimum at the small viewport and the maximum at the large one. The calculator does this for you.
Why does the clamp calculator output px instead of rem?
All inputs and outputs are in pixels, and the middle term combines px with vw rounded to six decimals. If your design system uses rem, divide the pixel values by your root font size after copying the result.
What causes the error that maximum viewport must exceed minimum?
The maximum viewport must be larger than the minimum viewport, and the maximum size cannot be smaller than the minimum size. Equal sizes are allowed and produce a fixed value. Swap the fields if you entered them in the wrong order.
Где обрабатываются мои данные?
Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.
Каковы ограничения входных данных?
Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.