Как работают media queries?

Media queries — это условные правила в CSS, которые применяют стили в зависимости от характеристик устройства. Чаще всего используются для ширины экрана: @media (max-width: 768px) — для мобилки, @media (min-width: 1024px) — для десктопа. Можно комбинировать условия через and, or, not. Помимо ширины есть prefers-color-scheme (тёмная тема), prefers-reduced-motion (анимации), orientation, resolution. Mobile-first подход рекомендует использовать min-width и наращивать стили.