Что такое CSS media queries?

Question

Accepted Answer

## Условные стили

`@media` применяет стили при выполнении условия: ширина вьюпорта, ориентация, hover-capable, prefers-color-scheme и др.

```css
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; }
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}
```

Mobile-first обычно пишут `min-width`. Логические комбинации: `and`, `or` (`,`), `not`. Container queries (`@container`) — следующий уровень «от размера родителя».

## Итог

Media queries — условный CSS от возможностей устройства/предпочтений пользователя; основа responsive design.