Домашнее задание

Задача: Проверьте учебную карточку на ширинах 320, 768 и 1200 CSS-пикселей, найдите breakpoint по содержимому и запишите, где нужен новый layout.

Создайте HTML с meta viewport

Без этой строки мобильная проверка не сработает.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <section class="card">
    <img src="cover.jpg" alt="Обложка">
    <div class="card__text">…</div>
  </section>
</body>

Напишите базовый CSS

Сначала добейтесь читабельной версии без лишних breakpoint — гибкая ширина и центрирование.

.card {
  width: min(100% - 2rem, 42rem);
  margin-inline: auto;
}

Проверьте ширины

Откройте DevTools (F12) → режим устройства и проверьте 320px, 768px, 1024px и 1200px. Где текст с картинкой выгоднее поставить в две колонки — там и breakpoint.

Мини-чеклист

Есть строка meta viewport в <head>.
Нет горизонтального скролла ни на одной ширине.
Текст остаётся читаемым.
Breakpoint объясняется содержимым, а не случайным числом.

Урок 31. Домашнее задание: Проблемы разных экранов: viewport и DPR