Что такое адаптивная верстка

Адаптивная верстка — это подход к созданию веб-страниц, при котором дизайн автоматически подстраивается под размер экрана устройства (десктоп, планшет, мобильный). Основные инструменты:

• Медиазапросы (CSS @media) — позволяют применять разные стили в зависимости от ширины экрана.
• Гибкие сетки (flexbox, grid) — элементы меняют размер и расположение.
• Относительные единицы (%, vw, rem) вместо фиксированных (px).

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

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

Плюсы:

• Один код для всех устройств.
• Улучшает UX и SEO.

Минусы:

• Сложнее тестировать.
• Может потребоваться оптимизация контента для мобильных.