Что такое @media (медиа-запросы)

@media — это CSS-правило, позволяющее применять стили в зависимости от характеристик устройства (ширина экрана, ориентация, разрешение и т. д.). Используется для создания адаптивного дизайна.

Пример:

/* Стили для экранов шириной до 768px */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* Стили для экранов в альбомной ориентации */
@media (orientation: landscape) {
  .sidebar {
    width: 30%;
  }
}

Ключевые моменты:

• Работает с медиа-запросами (тип устройства, условия).
• Часто используется min-width/max-width для адаптации под мобильные устройства.
• Можно комбинировать условия через and, not, only.
• Поддерживается всеми современными браузерами.