Как медиа-запросы обеспечивают адаптивный дизайн?

Question

Accepted Answer

**Медиа-запросы** условно применяют CSS на основе характеристик устройства — чаще всего **ширины viewport** — позволяя одной таблице стилей адаптироваться к телефонам, планшетам и настольным компьютерам.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Почему это важно

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) обычно предпочтителен: вы пишете простые базовые стили для малых экранов, а затем постепенно добавляете сложность для более крупных. Это обычно дает более чистый и легкий CSS и соответствует тому, как переформатируется содержимое.

## Другие полезные запросы

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` и `prefers-color-scheme` отвечают на *предпочтения* пользователя, а не на размер экрана — важно для доступности и тем.

## Объединение условий

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## Заметка о будущем: container queries

Медиа-запросы отвечают на **viewport**; новые **container queries** (`@container`) отвечают на размер *родительского элемента* — лучше для поистине переиспользуемых компонентов. Они дополняют медиа-запросы, а не заменяют их.

## Почему это важно

Медиа-запросы — это основа адаптивного дизайна — адаптация макета, интервалов и столбцов к размеру экрана.

Подход mobile-first `min-width` делает CSS управляемым, а запросы предпочтений (`prefers-reduced-motion`, `prefers-color-scheme`) расширяют адаптивность до доступности и тем.