Как сделать адаптивный текст css

Для того, что бы размер шрифта масштабировался относительно размеров окна браузера можно использовать специальные еденицы измерения вместо px - vw. 1 vw = 1% от ширины пользовательской части онка браузера.

Например:

p {
  font-size: 10vw; /* 10% от viewport */
}

Другой способ, когда нам необходимо чтобы масштабирование происходило в определенном диапазоне. Выполняется с помощью функции calc(). Например от 12px до 20px, при изменении размера окна браузера при размере макета сайта в 1200px.

p { 
  font-size:calc(12px + 8 * (100vw - 320px) / 880);
}

Где 12px это наш минимальный шрифт, 8 – разница между минимальным и максимальным размерами шрифта, 100vw – это полная текущая ширина вьюпорта (экрана) 320px – минимальная ширина контейнера сайта, например на мобильном устройстве. 880 - разница между максимальным размером контейнера сайта и минимальным размером контейнера сайта. Т.е. изначальные размеры макета: 880 + 320 = 1200px.

Размер текста, который плавно меняется вместе с шириной экрана, задают функцией clamp():

h1 {
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
}

Три значения: минимум, желаемый размер и максимум. Заголовок растёт с шириной окна, но не становится меньше 1.75rem на телефоне и больше 3rem на широком мониторе.

Почему не только vw

font-size: 5vw тоже масштабирует текст, но у такого решения две проблемы:

• на телефоне текст становится слишком мелким, на большом мониторе — огромным;
• при увеличении масштаба страницы (Ctrl + +) размер в vw не меняется. Это нарушает требования доступности WCAG.

Слагаемое в rem внутри clamp() решает вторую проблему: текст реагирует на масштаб.

Через медиазапросы

Ступенчатое изменение размера:

body {
  font-size: 16px;
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Единицы rem и em

• rem считается от размера шрифта элемента <html>, по умолчанию 16px. Поменяли его в медиазапросе — пересчитались все размеры на rem.
• em считается от размера шрифта родителя. Во вложенных элементах значения перемножаются, и размер может неожиданно вырасти.

Текст по размеру блока

Если размер текста должен зависеть от ширины карточки, используйте контейнерные запросы:

.card {
  container-type: inline-size;
}

.card h2 {
  font-size: clamp(1rem, 5cqi, 1.5rem);
}

cqi — 1% ширины контейнера.

Адаптивную вёрстку разбирают в курсе «Профессиональная вёрстка».