Ответ
Адаптивная версия страницы (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. Недостатки: Может требовать загрузки лишних ресурсов на мобильных устройствах, сложнее реализовать кардинально разный дизайн для разных устройств.
Ответ 18+ 🔞
Э, слушай, ты, вот эта вся хуйня про адаптивные сайты... Ну, это когда у тебя одна страничка, а выглядит по-разному на компе, телефоне и планшете. Как хамелеон, блядь, только в интернете. Подстраивается под размер экрана, чтобы не пришлось хуй с горы катать, разглядывая мелкие буковки на телефоне.
Главный инструмент тут — эти, как их, медиа-запросы в CSS. С их помощью ты говоришь стилям: «Слушай сюда, если экран шире 768 пикселей — включай вот этот макет, а если уже — сиди в своей мобильной версии и не выёбывайся».
Вот, смотри на код, он всё объясняет:
/* Сначала делаем для мобилок (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%; } /* И уже колонки пляшут */
}А теперь, чтобы было понятнее, чем это отличается от старого подхода с отдельной мобильной версией (типа m.site.com), вот тебе таблица, ёпта:
| Адаптивный дизайн (RWD) | Отдельная мобильная версия (m.site.com) |
|---|---|
| Один URL и один код на всех | Два разных URL и две кодовые базы — пиздец бардак |
| Меняется всё через CSS, HTML один | Совсем разные HTML-документы, как будто два сайта |
| Для SEO лучше — дублирования контента нет | Риск дублирования контента, поисковики могут наказать |
| Сложнее сделать УЖАСНО разный дизайн для мобилки и компа | Позволяет на мобилке всё полностью перекроить, хоть в жопу раз |
Плюсы RWD: Один код, все довольны, SEO в порядке, пользовательский опыт последовательный. Минусы: Иногда на мобилку грузится дохуя лишнего кода для десктопа, который ей нахуй не сдался. И если тебе нужен дизайн для телефона, который вообще ни разу не похож на компьютерный, то тут уже придётся пиздеть мозги, блядь.