Как сделать адаптивный текст без media queries? — 3 июня 2026 г. в 19:03:30.938
Как сделать адаптивный текст без media queries? Очень часто для адаптации текста под разные экраны используют отдельные breakpoint. В итоге CSS разрастается, а шрифты начинают масштабироваться неравномерно. Обычно это выглядит так: .title { font-size: 3rem; } @media (max-width: 768px) { .title { font-size: 2rem; } } Но CSS умеет нативно адаптировать размер текста под экран: .title { font-size: clamp(1.2rem, 4vw, 3rem); } clamp() задаёт минимальный размер, адаптивное значение и максимальный предел. Теперь текст плавно масштабируется вместе с viewport. .subtitle { font-size: clamp(1rem, 2vw, 1.5rem); } Особенно хорошо это работает для hero-блоков, заголовков, кнопок и адаптивных интерфейсов. Media queries часто вообще становятся не нужны. clamp() позволяет создавать по-настоящему адаптивные интерфейсы без множества контрольных точек и дублирования CSS. Code Ready | #совет