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

Для того, чтобы сделать адаптивный текст в CSS, можно использовать несколько свойств CSS, чтобы текст масштабировался в зависимости от размера экрана и устройства.

Одним из таких свойств является font-size. Задавая значения font-size, которые зависят от ширины экрана, мы можем создавать адаптивный текст.

Вот пример кода CSS, который устанавливает размер шрифта для текста внутри элемента div в зависимости от ширины экрана:

div {
  font-size: 16px; /* базовый размер шрифта */
}

@media screen and (max-width: 600px) {
  div {
    font-size: 14px; /* уменьшаем размер шрифта для меньших экранов */
  }
}

@media screen and (max-width: 400px) {
  div {
    font-size: 12px; /* еще больше уменьшаем размер шрифта для самых маленьких экранов */
  }
}

В этом примере мы используем font-size для установки базового размера шрифта для текста внутри элемента div. Затем мы используем @media-запросы для настройки размера шрифта для разных размеров экрана.

В первом @media-запросе мы устанавливаем размер шрифта в 14 пикселей для экранов с шириной до 600 пикселей. Во втором @media-запросе мы устанавливаем размер шрифта в 12 пикселей для экранов с шириной до 400 пикселей.

Также можно использовать em для установки относительного размера шрифта в зависимости от базового размера шрифта. Например:

div {
  font-size: 16px;
  line-height: 1.4;
}

@media screen and (max-width: 600px) {
  div {
    font-size: 0.875em; /* уменьшаем размер шрифта до 14px, если браузер поддерживает em */
  }
}

@media screen and (max-width: 400px) {
  div {
    font-size: 0.75em; /* уменьшаем размер шрифта до 12px, если браузер поддерживает em */
  }
}

Здесь мы установили line-height для элемента div, чтобы определить высоту строки. Затем мы использовали font-size: 0.875em и font-size: 0.75em для уменьшения размера шрифта в 14 пикселей и 12 пикселей соответственно, если браузер поддерживает em для установки относительного размера шрифта.