Responsive design: медиазапросы, @media, max-width, min-width и др.

Что такое адаптивный дизайн?

Адаптивный дизайн — это подход, при котором сайт автоматически подстраивается под размер экрана устройства. Будь то огромный монитор или компактный смартфон — контент всегда выглядит идеально.

Ключевые инструменты:
- Медиазапросы (@media) — позволяют применять CSS-правила в зависимости от условий (ширина экрана, ориентация и др.).
- max-width и min-width — задают диапазоны, в которых стили будут работать.
- Относительные единицы (%, vw, rem) — делают элементы гибкими.

Медиазапросы: как это работает?

Медиазапросы — это условия, при которых срабатывают определённые стили. Синтаксис прост:

@media (условие) {
  /* Стили, которые применяются только при выполнении условия */
}

Основные типы условий

1. По ширине экрана (width, min-width, max-width)

min-width: 768px — стили сработают от 768px и шире.
max-width: 1024px — стили сработают до 1024px включительно.

2. По ориентации (orientation)

orientation: portrait — вертикальный экран (смартфон).
orientation: landscape — горизонтальный экран (планшет, ПК).

3. По плотности пикселей (resolution)

min-resolution: 2dppx — для экранов с высокой плотностью (Retina).

Практика: делаем адаптивную сетку

Допустим, у нас есть три колонки, которые на мобильных устройствах должны превращаться в одну.

Базовый HTML

<div class="container">
  <div class="column">Колонка 1</div>
  <div class="column">Колонка 2</div>
  <div class="column">Колонка 3</div>
</div>

CSS для десктопа

.container {
  display: flex;
  gap: 20px;
}

.column {
  flex: 1;
  padding: 20px;
  background: #f0f0f0;
}

Добавляем адаптивность

/* Для экранов уже 768px (планшеты и смартфоны) */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .column {
    margin-bottom: 10px;
  }
}

Что произошло?
- На широких экранах колонки стоят в ряд (flex-direction: row по умолчанию).
- На узких — перестраиваются в столбик (flex-direction: column).

`min-width` vs `max-width`: когда что использовать?

Условие	Когда применять	Пример
`min-width`	"От этого размера и больше"	Десктопные стили (от 1024px)
`max-width`	"До этого размера включительно"	Мобильные стили (до 768px)

Пример: адаптивное меню

/* Базовые стили (мобильные) */
.menu {
  display: none;
}

/* Показываем меню на десктопах */
@media (min-width: 992px) {
  .menu {
    display: flex;
  }
}

💡 Совет: Начинайте проектировать с мобильной версии (Mobile First), а затем расширяйте стили через min-width. Так код будет чище!

Комбинирование условий

Можно задавать несколько условий через and:

/* Сработает только на экранах от 600px до 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
  body {
    background: lightblue;
  }
}

Ещё пример:

/* Только для планшетов в альбомной ориентации */
@media (min-width: 768px) and (orientation: landscape) {
  .sidebar {
    width: 300px;
  }
}

Частые ошибки и как их избежать

1. Неправильный порядок медиазапросов

Если у вас есть max-width: 768px и max-width: 1024px, расположите их от большего к меньшему, иначе CSS-каскад перекроет стили.

2. Жёсткие пиксели (px) вместо относительных единиц

Используйте %, vw, rem для гибкости.

3. Игнорирование Mobile First

Проще расширять стили, чем пытаться «ужимать» десктопную вёрстку.

Итог

✅ Медиазапросы (@media) — мощный инструмент для адаптивного дизайна.
✅ min-width — для десктопных стилей, max-width — для мобильных.
✅ Mobile First — начинайте с малого и постепенно расширяйте.

Теперь ваш сайт будет выглядеть отлично на любом устройстве! 🎉