Адаптивные размеры CSS

Задайте размер текста или отступа для узкого и широкого экрана. Инструмент подготовит CSS, который плавно меняет размер между ними. Ниже — ответы на частые вопросы.

Пример

font-size: clamp(1rem, 0.833333rem + 0.833333vw, 1.5rem);

При базовом шрифте 16px текст меняется от 16px на ширине 320px до 24px на ширине 1280px.

Загружаем форму. Если она не появилась, обновите страницу.

Часто задаваемые вопросы

Куда вставить код?
Добавьте правило в стили сайта и замените селектор на нужный. Для текста используется font-size, для расстояния между элементами — gap. Отступ работает в сетке или флекс-контейнере.
Как меняется размер?
Между заданными ширинами — плавно, за их пределами остаётся крайнее значение. Размер может и уменьшаться. Ширина относится к окну браузера, а не к колонке.
Почему в результате rem?
Код рассчитан для базового шрифта 16px. Если размер шрифта корневого элемента вашей страницы отличается, изменятся размеры и границы их перехода. Проверьте также увеличение страницы до 200%: текст должен оставаться удобным, а содержимое — доступным.
Какие размеры можно задать?
Ширина должна быть больше нуля, размер текста и отступ могут быть нулевыми. Дроби можно писать с точкой или запятой. Широкий экран должен быть шире узкого. Если числа не позволяют получить точный CSS, инструмент сообщит об этом. Данные остаются в этой вкладке и не сохраняются.