Представьте: вы открыли сайт на большом мониторе — заголовок крупный и читается легко. Перешли на телефон — тот же заголовок стал меньше, но не крошечным, а всё ещё удобным. И всё это без скачков, без полос прокрутки и без настроек под каждое устройство отдельно.
Раньше для этого приходилось писать специальные правила: «если ширина экрана меньше 500 пикселей, сделай шрифт таким-то». Это работало, но правил получалось много. Сегодня есть способ проще и элегантнее — с помощью одного математического действия.
В чём суть
В веб-вёрстке есть две важные единицы измерения:
- Пиксели (пишут как px) — точный размер, как сантиметры на линейке.
- Ширина окна (пишут как vw) — размер, который зависит от экрана. 1vw = 1% от ширины экрана.
Так вот, если задать шрифт просто в vw, то на огромном мониторе он станет неприлично большим, а на очень узком телефоне — неприлично маленьким. Это неудобно.
И тут на помощь приходит clamp. Это правило, которое говорит браузеру:
- меньше этого не сжимайся (минимальный размер),
- больше этого не растягивайся (максимальный размер),
- а внутри диапазона плавно меняйся пропорционально ширине экрана.
Главная формула для идеального текста
На практике это выглядит так:
font-size: clamp(1rem, 4vw, 2rem);
Переведём на человеческий:
- 1rem — базовый размер текста (примерно как стандартный шрифт на сайте).
- 4vw — плавная настройка под ширину экрана.
- 2rem — максимальный размер, дальше которого текст не вырастет.
То есть на узком телефоне текст будет не меньше обычного книжного. На широком мониторе — не больше крупного заголовка. А между этими состояниями — плавное изменение.
Как найти золотую середину
Самый частый вопрос: что писать в среднюю часть (там, где 4vw)? Обычно отлично работают значения от 3 до 6. Чем крупнее текст (заголовок), тем цифра больше.
Пример для заголовка: clamp(1.5rem, 5vw, 3rem);
Пример для обычного текста статьи: clamp(1rem, 2.5vw, 1.25rem);
Никаких сложных вычислений — просто проверьте на телефоне и на ноутбуке. Если на телефоне мелковато — увеличивайте первую цифру. Если на мониторе слишком крупно — уменьшайте третью цифру.
Почему это удобно
Вам не нужно прописывать: «для экранов до 600 пикселей — так, для экранов от 600 до 1200 — иначе, для больших — третий вариант». Всё работает само.
Меньше кода — меньше ошибок. Быстрее загрузка страницы. И читатели не замечают никаких скачков: текст просто всегда удобный.
Самый частый подвох
Иногда новички ставят clamp(14px, 4vw, 24px). Это работает, но плохо дружит с настройками читателя. Если у человека в браузере увеличен стандартный шрифт по зрению, такой текст не подстроится.
Поэтому лучше вместо px использовать rem. 1rem — это обычный шрифт, установленный в браузере по умолчанию. Так вы учитываете настройки каждого пользователя.
Короткий итог
Одно правило clamp() заменяет несколько старых настроек:
- Текст не скачет на разной ширине экрана.
- Не надо проверять десятки размеров устройств.
- Читателям всегда комфортно, хоть с часов, хоть с телевизора.
Попробуйте на своём сайте или блоге. Начните с заголовка — и вы увидите, как просто сделать типографику, которая радует глаз на любом устройстве без лишней работы.
На этом всё. Подписывайтесь на канал, чтобы ничего не пропустить.