Урок 13. Решения: Единицы измерения в CSS

📁 Раздел: Основы CSS ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная

#min #max #clamp

⚡ Кратко

Сверяйтесь с решениями после собственной попытки. Ниже — готовый код и его живой результат.

Решения заданий

1. Читаемый контейнер (max-width в ch + padding в rem)

Контейнер ограничен по ширине в ch, поэтому строки не растягиваются и читаются комфортно.

.page {
  max-width: 70ch;
  margin: 0 auto;
  padding: 2rem 1rem;
}

2. Кнопка с padding в em — масштабируется с текстом

Padding задан в em, поэтому при изменении font-size кнопки её внутренние отступы растут пропорционально.

.btn   { padding: 0.6em 1.2em; }  /* отступ от шрифта кнопки */
.btn-sm { font-size: 14px; }
.btn-lg { font-size: 20px; }

3. Адаптивный заголовок через clamp()

Заголовок, который тянется с экраном

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
}

Критерий готовности: вы можете изменить пример под новую задачу и объяснить, почему результат изменился (например, что rem не зависит от вложенности, а em — зависит).