Что такое адаптивная (респонсивная) вёрстка?

Адаптивная вёрстка (Responsive Web Design, RWD) — это подход к разработке веб-интерфейсов, при котором сайт автоматически подстраивает свой макет, изображения и типографику под размер и ориентацию экрана устройства пользователя.

Ключевые технологии и принципы:

1. Гибкая сетка на основе относительных единиц:

   • Использование %, fr (Grid), flex-grow вместо фиксированных px.
   • CSS Grid и Flexbox — основные инструменты для создания гибких макетов.

2. Гибкие медиа (изображения, видео):

   • max-width: 100%; height: auto; для изображений.
   • Атрибут srcset и элемент <picture> для загрузки изображений оптимального размера.

3. Медиазапросы (CSS Media Queries):

   • Позволяют применять разные CSS-правила в зависимости от характеристик устройства (ширина, высота, ориентация, разрешение).

Пример базового медиазапроса для мобильных устройств (Mobile First):

/* Базовые стили для мобильных (Mobile First) */
.container {
  padding: 1rem;
  width: 100%;
}

/* Стили для планшетов и выше */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
  .sidebar {
    display: block; /* Показываем сайдбар на больших экранах */
  }
}

/* Стили для десктопов */
@media (min-width: 1200px) {
  .container {
    width: 1140px;
  }
}

Подход Mobile First:

1. Сначала разрабатывается интерфейс для мобильных устройств (самый узкий видport).
2. С помощью медиазапросов min-width добавляются улучшения для более широких экранов.
3. Преимущества: Упрощение кода, приоритет производительности на мобильных, прогрессивное улучшение.

Тестирование: Обязательно проверять на реальных устройствах, использовать эмуляторы в DevTools и инструменты вроде BrowserStack.