Адаптивный дизайн: что это и как реализовать

Адаптивный дизайн (Responsive Design) — подход к веб-разработке, при котором сайт корректно отображается на всех устройствах: мобильных, планшетах, десктопах.

Что такое адаптивный дизайн

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

Адаптивный дизайн строится на трёх принципах: гибкие сетки, гибкие медиа, CSS media queries.

Зачем нужен адаптивный дизайн

Статистика использования мобильных устройств:

Более 60% мирового трафика — мобильные устройства
Google использует mobile-first indexing
Неадаптивный сайт теряет позиции и пользователей
Core Web Vitals оцениваются для мобильной версии

Основы CSS адаптивности

Media Queries

/* Мобильные (по умолчанию) */
.container {
  width: 100%;
  padding: 0 16px;
}

/* Планшеты */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Десктопы */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Гибкие сетки: CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

Гибкие сетки: Flexbox

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card {
  flex: 1 1 280px; /* растёт, сжимается, минимум 280px */
}

Адаптивные изображения

<!-- Разные изображения для разных размеров экрана -->
<picture>
  <source media="(min-width: 1200px)" srcset="/img/hero-large.jpg">
  <source media="(min-width: 768px)" srcset="/img/hero-medium.jpg">
  <img src="/img/hero-small.jpg" alt="Hero" />
</picture>

<!-- Адаптивный размер через srcset -->
<img
  src="/img/photo.jpg"
  srcset="/img/photo-400.jpg 400w, /img/photo-800.jpg 800w"
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Photo"
/>

Mobile-first vs Desktop-first

Mobile-first (рекомендуется):

/* Базовый стиль для мобильных */
.element { font-size: 16px; }

/* Увеличиваем для больших экранов */
@media (min-width: 768px) {
  .element { font-size: 18px; }
}

Desktop-first (устаревший подход):

.element { font-size: 18px; }

@media (max-width: 767px) {
  .element { font-size: 16px; }
}

Mobile-first: стили от меньшего к большему — производительнее и логичнее.

Тестирование адаптивности

Способы тестирования:

Chrome DevTools Device Mode (F12 → иконка телефона)
Реальные устройства
BrowserStack или аналоги
Специализированные инструменты

Проверка адаптивности на reChecker

Используйте Responsive Tester для тестирования вашего сайта при разных разрешениях экрана. Инструмент позволяет:

Просмотреть сайт в iframe для 6 стандартных устройств
Переключиться между портретной и альбомной ориентацией
Быстро сравнить отображение на разных устройствах

FAQ

Адаптивный дизайн vs мобильная версия — в чём разница? Мобильная версия — отдельный сайт (m.example.com). Адаптивный дизайн — один сайт с гибким интерфейсом. Google предпочитает адаптивный дизайн: проще индексировать, нет дубликатов.

Нужно ли тестировать на всех устройствах? Тестируйте на ключевых размерах: 375px (iPhone SE), 768px (iPad), 1280px (ноутбук), 1920px (FHD). Дополнительно проверьте реальные устройства наиболее распространённые у вашей аудитории.

Как узнать какие устройства используют мои посетители? Google Analytics → Аудитория → Мобильные устройства. Или Яндекс.Метрика → Технологии → Устройства.