Генератор CSS clamp
Введите ширину экрана и размер для маленького и большого экранов, чтобы создать CSS с плавным изменением размера текста или интервалов. Просмотрите результат в px или rem, затем скопируйте CSS и код Tailwind либо сохраните их как текст.
Возможности
Укажите две пары ширины и размера
Задайте размеры для узкой и широкой области просмотра. Поддерживаются 6 типов: размер шрифта, интервалы, внутренние и внешние отступы, ширина и высота.
Создание кода в px или rem
Введите все значения в пикселях, а для вывода выберите px или rem. Получите объявление CSS и код Tailwind с произвольным свойством.
Сразу проверьте созданный CSS
CSS применяется к двум элементам в окне предварительного просмотра. Проверьте отображение текста и интервалов при текущей ширине рамки.
Как пользоваться
Выберите изменяемое свойство
Выберите свойство CSS, которое нужно задать, например font-size для размера текста или gap для расстояния между элементами.
Введите две ширины области просмотра и размера
Введите две ширины области просмотра и соответствующие размеры в пикселях. Размер для узкой области просмотра не должен превышать размер для широкой.
Проверьте единицу вывода и создайте код
В дополнительных настройках выберите px или rem. Для rem проверьте базовый размер шрифта перед нажатием «Создать CSS».
Просмотрите результат и получите код
Скопируйте CSS и вставьте его в нужное место. Откройте код Tailwind, чтобы получить его. Также можно скопировать оба элемента вместе или сохранить их как текст.
Когда пригодится
Плавное изменение размера заголовков
Если нужно задать размеры текста для узкой и широкой области просмотра и плавно менять их между этими значениями, а не переключать ступенчато.
Настройка интервалов под ширину области просмотра
Если нужно, чтобы интервалы между карточками или внутренние отступы менялись в заданном минимальном и максимальном диапазоне.
Задание плавно меняющихся размеров и просмотр результата
Три значения в clamp
clamp — функция CSS, задающая минимальное значение, плавно меняющееся значение и максимальное значение. Созданная формула соединяет две опорные точки линейным выражением и ограничивает размеры за пределами диапазона значениями на концах.
Ввод в px; вывод в px или rem
Ширина области просмотра и размеры вводятся в пикселях. При выводе в rem размеры и постоянный член делятся на базовый размер шрифта, а коэффициент vw для ширины области просмотра используется без изменений.
Согласуйте базовый rem с местом использования кода
По умолчанию в коде 1rem считается равным 16 пикселям. Если в месте использования кода размер шрифта корневого элемента отличается, конечные размеры и характер изменения тоже будут отличаться. Проверьте результат в месте использования.
Ширина области просмотра определяется рамкой предварительного просмотра
Предварительный просмотр выполняется в отдельной рамке. vw рассчитывается по ширине внутри рамки, а не по ширине всего экрана. В зависимости от свойства один и тот же CSS применяется к тексту, промежутку между двумя элементами, отступам или размерам элемента.
Также проверьте код в месте использования
Текст и структура предварительного просмотра фиксированы. В месте использования кода также проверьте шрифты, длинный текст, переносы строк и увеличение текста в браузере. Код Tailwind использует формат произвольного свойства; убедитесь, что он распознаётся и создаётся в месте использования.
Часто задаваемые вопросы
Что происходит за пределами заданного диапазона ширины области просмотра?
Для ширины меньше заданного минимального значения используется минимальный размер, а для ширины больше максимального — максимальный. Для rem используйте тот же базовый размер шрифта, что и при создании кода.
Что такое базовый размер шрифта для rem?
Это значение в пикселях, которое считается равным 1rem. По умолчанию оно составляет 16 пикселей; в дополнительных настройках его можно изменить на значение от 1 до 1000 пикселей. Укажите размер шрифта корневого элемента там, где будет использоваться код.
Можно ли указать одинаковый размер или отрицательное значение?
Чтобы задать постоянный размер, укажите одинаковые минимальное и максимальное значения. Отрицательные значения разрешены только для margin. Размеры, уменьшающиеся при увеличении области просмотра, не поддерживаются.
Изменения свойств или значений применяются сразу?
Изменение этих параметров очищает созданный код и предварительный просмотр. Нажмите «Создать CSS», чтобы обновить их. То же происходит при смене единицы вывода или базового размера шрифта.
Можно ли изменить текст предварительного просмотра?
Пример текста и строка Aa 123 фиксированы. Редактировать текст нельзя. Также проверьте фактический текст и ширину отображения на странице, где используется созданный CSS.
Ввод и результаты
- Ширина области просмотра
- От 1 до 100 000 пикселей. Меньшая ширина области просмотра должна быть меньше большей. Допускаются дробные значения.
- Размер
- От 0 до 10 000 пикселей. Только для margin допускаются значения до −10 000 пикселей. Размер для узкой области просмотра не должен превышать размер для широкой.
- Вывод
- Объявление CSS и произвольное свойство Tailwind. Сохраните оба элемента в файле css-clamp-generator.txt.
- Точность
- В созданной формуле используются коэффициенты длиной до 13 значащих цифр. Ошибка возникает, например, если ширины настолько близки, что формула после округления не воспроизводит опорные точки.