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

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

⚡ Кратко

Сделайте задания по порядку: каждое следующее опирается на предыдущее.

Практические задания

  1. Читаемый контейнер. Создайте блок с max-width: 70ch и padding в rem. Ожидаемый результат: текст не растягивается на всю ширину окна, строка остаётся короткой.
  2. Сравнение единиц шрифта. Поставьте рядом три элемента: font-size: 20px, 1.25rem и 1.25em (внутри родителя с другим font-size). Ожидаемый результат: px и rem дадут одинаковый размер (при корне 16px), а em — другой, зависящий от родителя.
  3. Кнопка с padding в em. Сделайте две кнопки с разным font-size, но общим padding: 0.6em 1.2em. Ожидаемый результат: у крупной кнопки отступы больше — они выросли вместе с текстом.
  4. Резиновая картинка. Ограничьте ширину изображения через max-width: 100%. Ожидаемый результат: картинка ужимается под контейнер и не вылезает за край на узком экране.
  5. Адаптивный заголовок. Задайте font-size: clamp(2rem, 5vw, 4rem). Ожидаемый результат: при сужении окна заголовок плавно уменьшается, но не меньше 2rem.
Проверяйте каждое задание, меняя ширину окна браузера и масштаб шрифта (Ctrl + «+») — так видно разницу абсолютных и относительных единиц.