Главная / Занятие 3

Адаптивная вёрстка и медиазапросы

Один макет — любое устройство. Ниже макет открыт внутри iframe: медиазапросы реагируют на ширину этого фрейма, а не всего окна, поэтому можно «примерить» любой экран.

Mobile-first @media Симулятор устройства

Три шага адаптивной вёрстки

  1. Метатег viewport — без него мобильный браузер игнорирует медиазапросы.
  2. Гибкая база — относительные единицы (%, rem, fr), max-width: 100% для изображений, flex-wrap / auto-fit.
  3. Медиазапросы — точечные изменения на контрольных ширинах.
Подход mobile-first
/* База — для мобильного */
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Планшет и выше */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Десктоп */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
Mobile-first означает, что базовые стили пишутся для узкого экрана, а медиазапросы только добавляют сложность через min-width. Такой код проще поддерживать и он быстрее работает на телефонах.

Симулятор устройства

Выберите ширину экрана или потяните ползунок.

375px

Задание

  1. Определите, на какой ширине макет переключается с одной колонки на две. Найдите этот медиазапрос в исходнике.
  2. Добавьте третью контрольную точку (например, 900 px) и измените цвет карточек.
  3. Проверьте свою курсовую страницу в симуляторе на ширине 320 px: не появилось ли горизонтальной прокрутки?
  4. Сделайте так, чтобы на узких экранах меню превращалось в «бургер». Подсказка — display: none в базе и display: flex в медиазапросе.