Media Queries в CSS: адаптивная вёрстка для всех экранов

Media queries (медиа-запросы) — это механизм в CSS, который позволяет применять стили в зависимости от характеристик устройства, например ширины экрана, плотности пикселей, ориентации и др.

Зачем нужны media queries?

Медиа-запросы позволяют создавать адаптивные и кросс-девайсные интерфейсы, которые хорошо выглядят на:

• Смартфонах
• Планшетах
• Ноутбуках
• Мониторах с разным разрешением

Простой пример

/* Базовый стиль */
.container {
  padding: 20px;
}

/* Применяется, если ширина экрана меньше 768px */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

Типичные сценарии использования

• Адаптация шрифтов и отступов под разные экраны
• Скрытие или отображение мобильного меню
• Перестройка гридов и флекс-контейнеров
• Изменение размеров изображений или карточек
• Обработка тёмной/светлой темы через (prefers-color-scheme)

Виды media features

Пример адаптивной сетки

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Таким образом, сетка перестраивается под размер экрана: 3 → 2 → 1 колонка.

Мобильная первая (mobile-first) стратегия

Чаще всего стили пишутся сначала для мобильных устройств, а затем добавляются медиа-запросы с min-width для более широких экранов:

.button {
  font-size: 14px;
}

@media (min-width: 768px) {
  .button {
    font-size: 16px;
  }
}

Итог

• Media queries — ключ к адаптивной верстке
• Позволяют применять разные стили в зависимости от устройства, экрана и пользовательских настроек
• Помогают улучшить юзабилити и внешний вид сайта на всех устройствах