Использовали ли вы media queries и мобильные раскладки на CSS? Как подходите?

Question

Accepted Answer

## Разберёмся

Да — это базовый инструмент адаптивности: меняем стили по ширине, высоте, `prefers-*` и типу носителя.

## Подход

- Mobile-first: базовые стили для узкого экрана, затем `@media (min-width: …)`.
- Ломаем layout в ключевых брейкпоинтах (не «каждые 50px»).
- Часто комбинируем с Flex/Grid, `clamp()`, относительными единицами.

```css
.nav { flex-direction: column; }
@media (min-width: 768px) {
  .nav { flex-direction: row; gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}
```

## Итог

Media queries — условие на окружение; современный responsive = queries + гибкая вёрстка, а не только фиксированные ширины «под iPhone».