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

Media queries применяют стили при определённых условиях: @media (max-width: 768px) для экранов до 768px. Можно комбинировать: @media (min-width: 768px) and (max-width: 1024px). Кроме ширины: prefers-color-scheme (тёмная тема), prefers-reduced-motion (отключить анимации), hover (есть ли ховер на устройстве), orientation. Mobile-first: пишешь базовые стили, расширяешь через min-width. Breakpoints обычно: 640, 768, 1024, 1280px. Tailwind и Bootstrap задают стандартные.