Как пользоваться media queries на практике?

Question

Accepted Answer

## Media queries на практике

Media query — условие в `@media` или атрибуте `media` у `<link>`. Частые фичи: `min-width` / `max-width`, `orientation`, `prefers-color-scheme`, `hover`.

```css
/* mobile-first */
.grid { display: block; }

@media (min-width: 640px) {
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}
```

Логические операторы: `and`, `or` (запятая / `or`), `not`.

## Итог

Пишите от мобильного базиса, добавляйте `min-width`-ступени и не забывайте предпочтения пользователя (motion, contrast, scheme).