Что делает at-правило `@media` в CSS?

Question

Accepted Answer

## Правило @media

`@media` применяет блок стилей только при выполнении media query — тип носителя и/или условия (ширина, ориентация, hover, print и т.д.).

```css
@media screen and (min-width: 768px) {
  .sidebar { display: block; }
}

@media print {
  .no-print { display: none; }
}
```

Без подходящего условия правила внутри блока не применяются.

## Итог

`@media` — основа responsive/print-стилей: одни и те же селекторы, разные условия среды.