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

Основные принципы:

Гибкие сетки (Fluid Grids): Использование относительных единиц (например, проценты) вместо жестких пикселей для размеров элементов и отступов.
Гибкие изображения (Flexible Images): Масштабирование изображений пропорционально размеру контейнера, чтобы они не выходили за его пределы.
Медиа-запросы (Media Queries): Использование CSS-правил, которые применяются в зависимости от характеристик устройства, таких как ширина экрана, высота, ориентация и разрешение.

/* Пример медиа-запроса */
.container {
  width: 960px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  /* Стили для экранов шириной до 768px */
  .container {
    width: 100%; /* Делаем контейнер полностью гибким */
    padding: 0 15px; /* Добавляем отступы по бокам */
  }
}

Преимущества:

Улучшенный пользовательский опыт: Сайт удобно просматривать и использовать на любом устройстве.
Одна кодовая база: Не нужно поддерживать отдельные версии сайта для разных устройств.
SEO-преимущества: Поисковые системы, такие как Google, отдают предпочтение сайтам с адаптивным дизайном.
Экономическая эффективность: Дешевле и быстрее разработать и поддерживать один адаптивный сайт, чем несколько версий.

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

Альтернативой является отзывчивая верстка (responsive design), которая часто считается синонимом адаптивной, но в строгом смысле может включать более комплексные подходы к изменению макета, включая полное изменение структуры страницы. Адаптивная верстка иногда подразумевает дискретные изменения макета при достижении определенных "точек останова" (breakpoints), определенных через медиа-запросы.

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