Какие свойства у @media в CSS важны на практике и как они влияют на поведение?

Медиазапрос `@media` проверяет характеристики устройства и применяет стили, если условия выполняются.

Характеристики

• `min-width` / `max-width` — ширина области просмотра; основа адаптивной вёрстки.
• `orientation` — portrait или landscape.
• `prefers-color-scheme` — светлая или тёмная тема в системе.
• `prefers-reduced-motion` — пользователь просил меньше анимаций.
• `hover` и `pointer` — есть ли наведение и насколько точный указатель (мышь или палец).
• `resolution` — плотность пикселей (Retina).

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
@media (hover: hover) {
  .card:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .2); }
}

Современный синтаксис диапазонов

@media (400px <= width <= 900px) { /* ... */ }

Коротко для собеседования

Чаще всего нужны ширина, ориентация, тема, prefers-reduced-motion и hover/pointer; условия комбинируют через and и запятую.

Подробнее: MDN — @media