Адаптив через rem+clamp

Почему связка rem + clamp() — это отличное решение

Использование rem и clamp() даёт множество преимуществ:

• Плавное масштабирование между брейкпоинтами — без резких скачков
• Контролируемое поведение на больших экранах, например, фиксированные стили после 1920px‍
• Минимум дизайнерских макетов — достаточно трёх разрешений‍

Почему это лучше, чем другие единицы

Пиксели (px)

• Полностью статичный — не адаптируется под размер экрана
• Плохая доступность — плохо масштабируется под пользовательские настройки
• Требует много медиазапросов для адаптации макетов

Относительная единица (em)

• Зависит от родительского элемента — может приводить к неожиданным результатам во вложенных компонентах

Единицы viewport (vw)

• Хорошо масштабируются, но могут чрезмерно растягиваться или сжиматься на очень маленьких или больших экранах
• Не учитывают настройки размера шрифта в браузере — это создаёт проблемы для доступности

Rem + clamp()

• Чёткое и предсказуемое поведение
• Плавное масштабирование между заданными контрольными точками
• Простота применения на основе нескольких фиксированных разрешений

Примеры кода:

• 14px: гарантированно не будет меньше этого значения (важно для читаемости)
• 1vw + 0.5rem: динамический расчёт между контрольными точками
• 18px: ограничивает рост на широких экранах

1html {
2  font-size: clamp(14px, 1vw + 0.5rem, 18px);
3}

Формула rem + clamp()

Для создания плавного масштабирования между двумя разрешениями используйте:

1clamp(MIN, CALC, MAX)

Где:

• MIN = значение на минимальном брейкпойнте (напр. 375px)
• MAX = значение на максимальном брейкпойнте (напр. 1440px или 1920px)
• CALC = динамическое значение, рассчитывается по формуле:

Плавное масштабирование шрифта от 14px (на 375px) до 18px (на 1440px)

1font-size: 
2clamp(14px, calc((18 - 14) / (1440 - 375) * 100vw + 14px), 18px);

‍

Как использовать в реальном проекте:

1. Настройка корневого размера шрифта (html) с помощью clamp()

1html {
2  font-size: clamp(14px, 1vw + 0.5rem, 18px);
3}

‍

2. Установите корневой размер шрифта с помощью clamp:

1h1 {
2  font-size: 2rem;
3}
4
5.container {
6  padding: 2rem;
7}

‍

3. Избегайте px, кроме случаев, когда это необходимо (например, для границ или иконок)

‍

‍Итог

Создание адаптивных макетов с использованием rem и clamp() — это быстро, гибко и надежно. Всего с тремя контрольными точками дизайна вы можете охватить практически весь спектр экранов, сократить необходимость в медиазапросах и сделать ваш сайт более доступным и удобным для пользователей.