Какие знаешь виды адаптивной верстки?

Виды адаптивной верстки

Адаптивная верстка — это подход к дизайну и разработке, при котором веб-сайт корректно отображается на устройствах разных размеров. Существует несколько основных видов адаптации.

1. Responsive Web Design (Отзывчивый дизайн)

Это наиболее современный и популярный подход. Сайт использует один HTML, но CSS адаптируется под разные экраны с помощью медиа-запросов и гибких макетов.

/* Мобильные устройства (по умолчанию) */
.container {
  width: 100%;
  padding: 10px;
  font-size: 14px;
}

/* Таблеты (от 768px) */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
    font-size: 16px;
  }
}

/* Десктопы (от 1024px) */
@media (min-width: 1024px) {
  .container {
    width: 960px;
    padding: 30px;
    font-size: 18px;
  }
}

Характеристики:

• Mobile-first подход (начинаем с мобильного)
• Гибкие сетки (flexbox, grid)
• Гибкие изображения
• CSS медиа-запросы
• Один HTML для всех устройств

Плюсы:

• SEO-friendly (один URL)
• Экономно в разработке
• Легко масштабировать

Минусы:

• Может быть медленнее на мобильных
• Сложнее обслуживать большие различия между версиями

2. Adaptive Web Design (Адаптивный дизайн)

Сервер определяет тип устройства и отправляет специально подготовленную версию сайта. Создаются отдельные вёрстки для разных размеров экранов.

// На сервере
app.get('/page', (req, res) => {
  const userAgent = req.headers['user-agent'];
  
  if (isMobile(userAgent)) {
    res.send(mobileVersion);
  } else if (isTablet(userAgent)) {
    res.send(tabletVersion);
  } else {
    res.send(desktopVersion);
  }
});

// Или используя viewport meta-tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Характеристики:

• Несколько фиксированных макетов (обычно 3-4)
• Точки останова (breakpoints): мобильный, таблет, десктоп
• Отдельная вёрстка для каждого устройства

Плюсы:

• Оптимизирована для каждого устройства
• Хорошая производительность

Минусы:

• Больше кода для поддержки
• Не масштабируется при новых разрешениях
• Сложнее в разработке

3. Mobile-First Approach (Мобайл-первый подход)

Начинают разработку с мобильной версии, затем добавляют возможности для больших экранов.

/* Начинаем с мобильного (320px и выше) */
.button {
  width: 100%;
  padding: 12px;
  font-size: 14px;
}

/* Добавляем для планшета и больше */
@media (min-width: 768px) {
  .button {
    width: 200px;
    padding: 15px;
    font-size: 16px;
  }
}

/* Добавляем для десктопа */
@media (min-width: 1200px) {
  .button {
    width: 300px;
    font-size: 18px;
  }
}

Плюсы:

• Лучше для производительности на мобильных
• Проще начать с простого
• По умолчанию работает везде

Минусы:

• Требует тщательного планирования

4. Desktop-First Approach (Десктоп-первый подход)

Противоположный подход — начинают с десктопной версии, затем упрощают для мобильных.

/* Начинаем с десктопа */
.sidebar {
  width: 300px;
  float: left;
}

/* Убираем для мобильных */
@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Минусы:

• Может привести к избыточному коду на мобильных
• Медленнее на мобильных устройствах
• Сейчас это не рекомендуемый подход

5. Fluid Grid Layout (Текучий макет)

Использует проценты вместо фиксированных пикселей, что позволяет макету растягиваться и сжиматься.

.container {
  width: 100%; /* Относительное значение */
  max-width: 1200px; /* Но не более нужного */
}

.column {
  width: calc((100% - 20px) / 3); /* Гибкая ширина */
  padding: 10px;
}

Плюсы:

• Гладкая адаптация между точками останова
• Лучше для промежуточных размеров

6. Hybrid / Liquid Design (Комбинированный подход)

Комбинирует элементы responsive и adaptive дизайна. Используются медиа-запросы, но есть и фиксированные макеты в определённых точках.

/* Жидкий макет с максимальной шириной */
.container {
  width: 90%; /* Текучий */
  max-width: 1440px; /* С ограничением */
  margin: 0 auto;
}

/* Медиа-запросы для оптимизации */
@media (max-width: 768px) {
  .container {
    width: 95%;
  }
}

Типичные breakpoints (точки останова)

/* Mobile first */
/* 0px - 767px: мобильные */

/* 768px - 1023px: таблеты */
@media (min-width: 768px) { }

/* 1024px - 1279px: маленькие десктопы */
@media (min-width: 1024px) { }

/* 1280px и выше: большие десктопы */
@media (min-width: 1280px) { }

/* Дополнительно: очень большие экраны */
@media (min-width: 1920px) { }

Современный подход: CSS Grid и Flexbox

// Автоматическая адаптивность без медиа-запросов
const layout = css`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
`;

// Элементы автоматически переносятся на новую строку

/* Flexbox для гибкого раскладки */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  flex: 1 1 300px; /* Растёт, не сжимается, минимум 300px */
}

Современные инструменты

Tailwind CSS:

// Responsive классы "из коробки"
<div className="w-full md:w-1/2 lg:w-1/3">
  Адаптивный контейнер
</div>

CSS Container Queries (новое в CSS):

@container (min-width: 400px) {
  .card {
    display: grid;
  }
}

/* Реагирует на размер контейнера, не viewport */

Правила для всех подходов

1. Тестируй на реальных устройствах — эмуляция браузера не всегда точна
2. Используй viewport meta-tag:

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

3. Оптимизируй изображения — используй srcset и picture для разных разрешений

   <img srcset="small.jpg 480w, medium.jpg 768w, large.jpg 1920w" src="medium.jpg" alt="">
   

4. Минимизируй HTTP запросы — используй CSS вместо изображений где возможно
5. Проверяй производительность — Lighthouse, WebPageTest

Резюме

Сегодня стандарт:

• Responsive Web Design с Mobile-First подходом
• Медиа-запросы CSS
• Flexbox и Grid
• Современные инструменты (Tailwind, Next.js и т.д.)

Избегай:

• Desktop-First (устаревает)
• Отдельных мобильных сайтов (плохо для SEO)

Выбирай подход исходя из проекта, но сейчас Responsive + Mobile-First — это индустриальный стандарт.