Для чего нужна адаптивная верстка

Адаптивная верстка нужна, чтобы сайт корректно отображался на разных устройствах (ПК, планшеты, смартфоны) с разными размерами экранов. Она автоматически подстраивает макет, шрифты, изображения и другие элементы под ширину viewport.

Ключевые инструменты:

• Медиазапросы (@media)
• Гибкие единицы (%, vw, rem)
• Flexbox/Grid для адаптивных сеток

Пример медиазапроса:

.container {
  width: 1200px; /* для десктопа */
}

@media (max-width: 768px) {
  .container {
    width: 100%; /* для мобильных */
  }
}

Без адаптивности пользователи получат нечитаемый контент или горизонтальный скролл на мобильных устройствах, что ухудшает UX и SEO.