Адаптивная вёрстка: viewport, breakpoints и мобильный опыт

Адаптив — это не «отдельная мобильная версия сайта», а одна вёрстка, которая корректно ведёт себя на разных ширинах. Основа: viewport, относительные единицы, Flex/Grid и точечные media queries.

Viewport

Без meta name="viewport" мобильный браузер может масштабировать «десктопную» ширину. Это первое, что проверяют в DevTools.

Mobile-first

Удобный подход: базовые стили для узкого экрана, затем @media (min-width: …) для расширения. Так меньше переопределений «с десктопа вниз».

Контент и касания

Следите за размером кнопок, читаемостью текста и отсутствием горизонтального скролла. После CSS логичный шаг — интерактив в JavaScript.

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="layout">
  <aside class="layout__side">Меню</aside>
  <main class="layout__main">Контент</main>
</div>

CSS

.layout {
  display: grid;
  gap: 1rem;
}
.layout__side,
.layout__main {
  padding: 1rem;
  background: #fff;
}
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 14rem 1fr;
  }
}

Практическое задание

Задание: сделайте макет «сайдбар + контент» адаптивным.

  • Есть meta viewport
  • На мобильном блоки идут столбиком
  • От 768px — две колонки
  • Нет горизонтального скролла на ширине 320px