В чём разница между адаптивной вёрсткой сайта и стратегией mobile-first?

Question

Accepted Answer

## Разберёмся
**Responsive** — сайт подстраивается под ширину (fluid + media queries), без отдельного «мобильного сайта». **Mobile-first** — *способ писать* эти стили: базовые правила для узкого экрана, затем `@media (min-width: …)` для больших.

## Пример mobile-first

```css
.card { display: block; }
@media (min-width: 768px) {
  .card { display: grid; grid-template-columns: 1fr 1fr; }
}
```

Desktop-first наоборот: база для большого экрана и `max-width` media. Responsive без mobile-first тоже возможен, но mobile-first обычно проще для прогрессивного усиления и производительности на слабых устройствах.

## Итог
Responsive — цель (одна вёрстка под разные ширины). Mobile-first — методология написания CSS внутри этой цели.