Генератор CSS clamp
Генерируйте адаптивное значение CSS clamp() из минимального/максимального размеров и ширины области просмотра.
Вывод
Введите минимальный и максимальный размер вместе с диапазоном области просмотра, к которому они применяются, и получите готовое к использованию выражение CSS clamp() для адаптивной, плавной типографики или отступов.
Как использовать
- Введите минимальный и максимальный размер в пикселях.
- Введите минимальную и максимальную ширину области просмотра, между которыми должны применяться размеры.
- Скопируйте сгенерированное объявление clamp(), при желании переименовав CSS-свойство.
Частые вопросы
- Как вычисляется адаптивное значение?
- Вычисляется линейный наклон между минимальным и максимальным размерами по диапазону области просмотра, выраженный как формула rem + vw внутри clamp().
- Почему в выводе используются rem и vw?
- rem сохраняет базовый размер относительно настроек шрифта пользователя, тогда как vw обеспечивает плавное масштабирование с шириной области просмотра.
- Что если моя максимальная область просмотра меньше минимальной?
- Инструмент показывает сообщение о проверке, предлагая сделать максимальную ширину области просмотра больше минимальной.