Генератор CSS clamp() — бесплатно
Генерируйте адаптивные значения CSS clamp() для отзывчивой типографики и отступов. Задайте минимальный/максимальный размер и диапазон вьюпорта, предпросматривайте результат и копируйте однострочный CSS.
Отображаемый размер при разных viewport
clamp(min, preferred, max) плавно масштабирует значение в зависимости от viewport, затем фиксируется на минимуме и максимуме. Заменяет наборы медиазапросов для типографики, отступов и ширин одной строкой.
Частые применения
- Создайте адаптивную текстуру жидкостиГладко масштабируйте размеры шрифтов между мобильным и рабочим столом одной строкой.
- Жидкие поля и прокладкиУвеличьте расстояние раздела с помощью окна просмотра вместо скачков в точках разрыва.
- Замените медиа-запросы на clamp()Свяжите стопки переопределений точек разрыва в одно жидкое значение.
- Создайте жидкую шкалу типовСоздавайте согласованные шаги clamp() для шкалы типов системы проектирования.
- Жидкие герои и дисплей заголовкиСделайте большие заголовки целевой страницы масштабироваться драматично, но безопасно.
Как это работает
Этот инструмент вычисляет значения CSS clamp() с использованием написанной вручную формулы линейной интерполяции — без библиотек, без обращений к серверу. Вы вводите два размера и две ширины окна просмотра; математика мгновенно выполняется в вашем браузере и производит готовое для вставки выражение clamp() с предпочтительным значением на основе vw, которое плавно масштабирует ваш шрифт или отступы между этими контрольными точками.
- 1Расчёт линейного наклонаИнструмент вычисляет наклон пиксель-на-пиксель: (макРазмер - минРазмер) / (макОкноПросмотра - минОкноПросмотра). Затем этот наклон преобразуется в единицы vw умножением на 100, что является ядром того, как работает масштабирование CSS относительно окна просмотра.
- 2Вывод точки пересеченияСмещение точки пересечения (в px или rem) рассчитывается так, чтобы линейная функция точно попадала на ваш минимальный размер при минимальном окне просмотра. Вместе наклон и точка пересечения формируют предпочтительное значение внутри clamp() — часть, которая фактически масштабируется.
- 3Конвертация единиц и форматирование выводаЕсли вы выбираете вывод rem, каждое значение в пикселях делится на настроенный вами корневой размер шрифта (по умолчанию 16px) перед записью в строку clamp(). Также производится соответствующий класс Tailwind с произвольным значением, с пробелами, заменёнными на подчёркивания согласно синтаксису Tailwind.
- 4Живой предпросмотр с ползунком окна просмотраПолзунок диапазона позволяет вам прокручивать от 320px до 1920px в ширину. На каждой позиции та же формула наклона и точки пересечения вычисляет ограниченный размер в реальном времени и рендерит образец текста при этом вычисленном размере пикселей, так что вы можете увидеть поведение масштабирования перед тем, как что-либо копировать.
Похожие инструменты
Генератор CSS Grid
Визуально спроектируйте CSS grid — дорожки, единицы и промежутки — и скопируйте сгенерированный CSS и HTML.
Какое у меня разрешение экрана
Посмотрите разрешение экрана в CSS и реальных пикселях, размер окна, пиксельное соотношение, глубину цвета, HDR, поддержку касаний и частоту обновления и скопируйте все это.
Создание подписи
Нарисуйте подпись мышью, пальцем или стилусом, или введите своё имя рукописным шрифтом, затем экспортируйте её как прозрачный PNG или SVG.