Адаптивная типографика: Тренажер CSS

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

Адаптивная типографика — это подход к веб-дизайну, при котором размер текста, межстрочный интервал и другие типографические свойства автоматически подстраиваются под размер экрана устройства пользователя. Это обеспечивает удобочитаемость и комфортное восприятие контента на любых устройствах, от маленьких смартфонов до больших настольных мониторов. В этих заданиях вы попрактикуетесь в использовании медиа-запросов (`@media`), относительных единиц (`rem`, `em`), вьюпортных единиц (`vw`, `vh`) и функции `clamp()` для создания гибких и адаптивных текстовых стилей.

Список тем

Базовое изменение размера шрифта

Сделайте так, чтобы базовый размер шрифта для всего документа (`html`) изменялся на маленьких экранах. На экранах шириной 600px и меньше, установите базовый размер шрифта в 14px. На экранах шире 600px, он должен оставаться 16px.

CSS

html {
  font-size: 16px;
}

input1 (input2: 600px) {
  html {
    input3: 14px;
  }
}

                     html {
  font-size: 16px;
}

input1 (input2: 600px) {
  html {
    input3: 14px;
  }
}

HTML

<h1>Заголовок страницы</h1>
<p>Это параграф текста. Его размер зависит от базового размера шрифта, установленного для элемента `html`, так как мы будем использовать относительные единицы `rem`.</p>
<p>Второй параграф для демонстрации.</p>

Используйте медиа-запрос (`@media`) с условием `max-width`. Внутри медиа-запроса выберите селектор `html` и установите для него свойство `font-size`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Использование `rem` для заголовка

Теперь, когда базовый размер шрифта (`html`) адаптивен, задайте размер шрифта для заголовка `h1` с использованием относительных единиц `rem`. Установите размер шрифта заголовка равным 2 `rem`. Это позволит заголовку масштабироваться вместе с базовым размером шрифта.

CSS

html {
  font-size: 16px;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

h1 {
  input1: 2input2;
  color: #333;
}

                     html {
  font-size: 16px;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

h1 {
  input1: 2input2;
  color: #333;
}

HTML

<h1>Адаптивный заголовок</h1>
<p>Этот текст использует базовый размер шрифта.</p>

Выберите селектор `h1`. Используйте свойство `font-size`. В качестве значения укажите число и единицу измерения `rem`. `1rem` равен базовому размеру шрифта элемента `html`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Изменение межстрочного интервала

Улучшите читаемость текста на маленьких экранах, немного увеличив межстрочный интервал для параграфов (`p`). Внутри медиа-запроса для экранов шириной до 600px, установите `line-height` для параграфов равным 1.6.

CSS

html {
  font-size: 16px;
}

p {
 line-height: 1.5;
 color: #555;
}

h1 {
  font-size: 2rem;
  color: #333;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
  p {
    input1: 1.6;
  }
}

                     html {
  font-size: 16px;
}

p {
 line-height: 1.5;
 color: #555;
}

h1 {
  font-size: 2rem;
  color: #333;
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
  p {
    input1: 1.6;
  }
}

HTML

<h1>Заголовок</h1>
<p>Длинный параграф текста, который должен быть удобочитаемым на разных экранах. Межстрочный интервал играет важную роль в восприятии текста, особенно на мобильных устройствах, где строки могут быть короче.</p>
<p>Еще один параграф для проверки межстрочного интервала.</p>

Внутри существующего медиа-запроса (`@media (max-width: 600px)`), добавьте правило для селектора `p`. Используйте свойство `line-height` и установите его значение без единиц измерения (оно будет множителем от текущего `font-size`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Вьюпортные единицы для заголовка

Сделайте размер заголовка `h1` плавно масштабируемым в зависимости от ширины вьюпорта. Используйте единицу `vw` (viewport width). Установите `font-size` для `h1` равным `8vw`. Обратите внимание, как размер будет меняться при изменении ширины окна.

CSS

html {
  font-size: 16px; /* Базовый размер для fallback и rem */
}

h1 {
  input1: 8input2;
  text-align: center;
  color: #2c3e50;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  color: #34495e;
}

                     html {
  font-size: 16px; /* Базовый размер для fallback и rem */
}

h1 {
  input1: 8input2;
  text-align: center;
  color: #2c3e50;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  color: #34495e;
}

HTML

<h1>Плавный Заголовок</h1>
<p>Размер заголовка выше теперь зависит от ширины окна браузера.</p>

Выберите селектор `h1`. Используйте свойство `font-size`. В качестве значения укажите число и единицу измерения `vw`. `1vw` равен 1% ширины вьюпорта.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Ограничение масштабирования с `clamp()`

Использование только `vw` может привести к слишком большому или слишком маленькому тексту на крайних размерах экранов. Используйте функцию `clamp()` для заголовка `h1`, чтобы ограничить его размер. Установите минимальный размер `1.5rem`, предпочтительный `5vw` и максимальный `3rem`.

CSS

html {
  font-size: 16px;
}

h1 {
  /* font-size: 8vw; */ /* Закомментировано предыдущее правило */
  input1: input2(1.5rem, 5vw, 3rem);
  text-align: center;
  color: #2c3e50;
  line-height: 1.2;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  color: #34495e;
}

                     html {
  font-size: 16px;
}

h1 {
  /* font-size: 8vw; */ /* Закомментировано предыдущее правило */
  input1: input2(1.5rem, 5vw, 3rem);
  text-align: center;
  color: #2c3e50;
  line-height: 1.2;
}

p {
  font-size: 1rem;
  line-height: 1.5;
  color: #34495e;
}

HTML

<h1>Ограниченный Заголовок</h1>
<p>Размер этого заголовка плавно меняется, но не становится слишком маленьким или слишком большим.</p>

Используйте свойство `font-size` для `h1`. В качестве значения примените функцию `clamp(MIN, PREFERRED, MAX)`. Замените `MIN` на минимально допустимый размер (например, `1.5rem`), `PREFERRED` на масштабируемое значение (например, `5vw`), и `MAX` на максимально допустимый размер (например, `3rem`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинированный `clamp()`

Иногда для предпочтительного значения в `clamp()` используют комбинацию относительных и вьюпортных единиц. Примените к параграфу (`p`) `font-size` с помощью `clamp()`. Установите минимальный размер `0.9rem`, максимальный `1.2rem`, а предпочтительное значение сделайте `0.8rem + 0.5vw`.

CSS

html {
  font-size: 16px;
}

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  color: #2c3e50;
  line-height: 1.2;
}

p {
  input1: clamp(0.9rem, input2 + 0.5vw, 1.2rem);
  line-height: 1.6;
  color: #34495e;
}

                     html {
  font-size: 16px;
}

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  color: #2c3e50;
  line-height: 1.2;
}

p {
  input1: clamp(0.9rem, input2 + 0.5vw, 1.2rem);
  line-height: 1.6;
  color: #34495e;
}

HTML

<h1>Заголовок</h1>
<p>Размер этого текста теперь также адаптивен с использованием clamp() и комбинированного значения. Он будет немного увеличиваться с шириной экрана, но останется в заданных пределах.</p>

Выберите селектор `p`. Используйте свойство `font-size` со значением `clamp()`. Первый аргумент - минимальный размер (`0.9rem`), третий - максимальный (`1.2rem`). Второй, предпочтительный аргумент, должен быть вычисляемым значением, например, `calc(0.8rem + 0.5vw)` или просто `0.8rem + 0.5vw` (CSS может вычислять это и без `calc()` внутри `clamp`).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Адаптация для очень маленьких экранов

На очень маленьких экранах (например, меньше 360px) даже `clamp` может давать крупноватый текст. Добавьте отдельный медиа-запрос для экранов с максимальной шириной 359px. Внутри него переопределите `font-size` для `h1` на `1.3rem` и для `p` на `0.85rem`, чтобы гарантировать читаемость.

CSS

html {
  font-size: 16px;
}

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  color: #2c3e50;
  line-height: 1.2;
}

p {
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem);
  line-height: 1.6;
  color: #34495e;
}

input1 (input2: 359px) {
  h1 {
    input3: 1.3rem;
  }
  p {
    font-size: 0.85rem;
  }
}

                     html {
  font-size: 16px;
}

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  color: #2c3e50;
  line-height: 1.2;
}

p {
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem);
  line-height: 1.6;
  color: #34495e;
}

input1 (input2: 359px) {
  h1 {
    input3: 1.3rem;
  }
  p {
    font-size: 0.85rem;
  }
}

HTML

<h1>Заголовок</h1>
<p>Этот текст должен стать еще немного меньше на самых узких экранах для лучшей читаемости.</p>

Создайте новый медиа-запрос с условием `max-width: 359px`. Внутри этого запроса добавьте правила для `h1` и `p`, устанавливая для них фиксированные (или меньшие) значения `font-size` в `rem`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку