Как сделать сайт адаптивным с помощью CSS?

Question

Accepted Answer

## Смысл

Адаптивность — контент и раскладка подстраиваются под ширину и возможности устройства.

## База

1. Viewport meta в HTML.
2. Гибкая сетка: Flex/Grid, `%`/`fr`/`minmax`, не только фиксированные px.
3. Медиазапросы / container queries.
4. Гибкие картинки: `max-width: 100%`, `srcset`.
5. Относительная типографика: `rem`, `clamp()`.

```css
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}
.title { font-size: clamp(1.25rem, 2vw + 1rem, 2rem); }
```

## Итог

Responsive ≠ один `@media`. Это гибкие единицы + сетка + queries + медиа.