Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Генератор плавного размера шрифта clamp()
Рассчитайте адаптивный font-size: clamp() по минимальному и максимальному размеру текста и ширине окна, в px или rem.
rem рассчитывается по указанному корневому размеру. На готовой странице проверьте масштаб браузера и увеличенный текст.
Удобный размер шрифта делает каждую строку понятнее.
CSS
Об инструменте
Задайте размеры заголовка для телефона и компьютера и проверьте промежуточные значения.
Как пользоваться
Укажите минимальный и максимальный размер шрифта и соответствующие ширины окна. Выберите px или rem, изменяйте ширину в предпросмотре и скопируйте либо скачайте CSS. Ширины должны возрастать, минимальный размер шрифта не может быть больше максимального.
Между заданными ширинами размер меняется линейно, а за их пределами остаётся в указанных границах. Для rem задайте корневой размер шрифта вашей страницы. Формула зависит от окна просмотра, а не контейнера, и не меняет остальные правила типографики.
Частые вопросы
Зачем указывать корневой размер для rem?
Предпросмотр переводит по нему rem в пиксели. Значение должно совпадать со страницей. Формула зависит от ширины окна; другой корневой размер меняет её поведение.
Как получить 16px на телефоне и 32px на компьютере?
Выберите px и задайте 16px при ширине области просмотра 400px и 32px при 1200px. Результат — clamp(16px, 8px + 2vw, 32px): при 800px размер равен 24px, за границами диапазона действуют минимум и максимум. Расчёт зависит от ширины области просмотра, а не контейнера.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0