Что такое MediaQuery

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

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

/* Пример: стили для темной темы */
@media (prefers-color-scheme: dark) {
  body {
    background: #222;
    color: #fff;
  }
}

Особенности:

• Работает с width, height, orientation, resolution, prefers-color-scheme и др.
• Можно комбинировать условия через and, not, only
• Часто используется вместе с mobile-first подходом (начинать с малых экранов)