Ответ
Адаптивная версия страницы (Responsive Web Design, RWD) — это подход, при котором один HTML-документ автоматически изменяет свой макет и внешний вид с помощью CSS в зависимости от размеров и характеристик устройства пользователя (ПК, планшет, смартфон).
Основной инструмент — CSS Media Queries:
/* Базовые стили (Mobile First) */
.container { width: 100%; padding: 10px; }
/* Для планшетов (ширина от 768px) */
@media (min-width: 768px) {
.container { width: 750px; padding: 20px; }
.sidebar { display: block; }
}
/* Для десктопов (ширина от 992px) */
@media (min-width: 992px) {
.container { width: 970px; }
.main-content { float: left; width: 70%; }
.sidebar { float: right; width: 25%; }
}| Сравнение с мобильной версией: | Адаптивный дизайн (RWD) | Отдельная мобильная версия (m.site.com) |
|---|---|---|
| Один URL и кодовая база | Два разных URL и кодовые базы | |
| Изменения через CSS | Разные HTML-документы | |
| Лучше для SEO (нет дублирования) | Риск дублирования контента | |
| Сложнее для кардинально разного UX | Позволяет полностью переработать UX для мобильных |
Преимущества: Единая кодовая база, улучшенное SEO, последовательный UX. Недостатки: Может требовать загрузки лишних ресурсов на мобильных устройствах, сложнее реализовать кардинально разный дизайн для разных устройств.