Ответ
Оба подхода помогают создавать интерфейсы для разных размеров экрана, но используют разные механизмы.
Адаптивный дизайн (Responsive Web Design)
Использует контрольные точки (breakpoints) через CSS медиазапросы (@media), чтобы кардинально менять макет, скрывать или перестраивать элементы при достижении определенной ширины.
/* Базовые стили для десктопа */
.sidebar { width: 300px; float: left; }
.content { margin-left: 320px; }
/* Медиазапрос для планшетов */
@media (max-width: 768px) {
.sidebar {
display: none;
}
.content {
margin-left: 0;
width: 100%;
}
}
/* Медиазапрос для мобильных */
@media (max-width: 480px) {
.button {
font-size: 14px;
padding: 10px;
}
}Суть: Дискретные, «ступенчатые» изменения макета.
Резиновый/жидкий дизайн (Fluid Layout)
Использует относительные единицы измерения (%, vw, vh), чтобы все элементы плавно масштабировались пропорционально размеру окна браузера.
.container {
width: 90%; /* Контейнер займет 90% ширины окна */
max-width: 1200px; /* Но не растянется бесконечно */
}
.column {
width: 50%; /* Колонка всегда 50% от ширины контейнера */
padding: 2%; /* Отступы также относительные */
}Суть: Плавное, непрерывное масштабирование.
Практика
Современная вёрстка обычно комбинирует оба подхода: используется резиновая сетка на относительных единицах, которая дополняется адаптивными медиазапросами для кардинальной перестройки структуры на контрольных точках. Это обеспечивает и плавность, и контроль над читабельностью на крайних размерах.
Ответ 18+ 🔞
Да ты посмотри, какая интересная хуйня! Два подхода, а в итоге один другому не мешает, а даже помогает, как хороший сосед по общаге.
Вот смотри, есть два чувака, которые хотят, чтобы сайт на всех экранах выглядел адекватно. Но методы у них, блядь, как небо и земля.
Адаптивный дизайн (Responsive Web Design)
Этот тип — максималист, любит чёткие рамки. Сидит, ждёт своего часа, как снайпер. Как только ширина окна браузера переползает за определённую черту — breakpoint — он, сука, выходит из засады с медиазапросами (@media) и начинает всё ломать и перестраивать. Скрыл сайдбар, колонки в столбик поставил, кнопки увеличил. Резко, кардинально, по-сталински.
/* Изначально всё для большого монитора, развалился в кресле */
.sidebar { width: 300px; float: left; }
.content { margin-left: 320px; }
/* Прихлопнули окно до планшета — медиазапрос сработал */
@media (max-width: 768px) {
.sidebar {
display: none; /* Боковую панель — нахуй, в топку! */
}
.content {
margin-left: 0; /* Освободили место */
width: 100%; /* И растянули на всю ширину */
}
}
/* Зашли с телефона — тут вообще мобилизация */
@media (max-width: 480px) {
.button {
font-size: 14px; /* Чтоб пальцем не промахнуться */
padding: 10px;
}
}Смысл его жизни: Резкие, ступенчатые изменения. Либо всё, либо ничего.
Резиновый/жидкий дизайн (Fluid Layout)
А этот — философ и йог. Он не любит резких движений. Его девиз: «Всё относительно, чувак». Он использует проценты (%), vw, vh, чтобы всё плавно текло и растягивалось, как жвачка. Уменьшаешь окно — контент не ломается, а просто становится уже, колонки пропорционально сжимаются. Красота, да?
.container {
width: 90%; /* Займу 90% от папиной ширины окна */
max-width: 1200px; /* Но дальше этой границы — ни ногой, я не дурак */
}
.column {
width: 50%; /* Мы с братаном всегда поровну, на любом экране */
padding: 2%; /* Отступы тоже долевые, чтоб не прилипало */
}Суть его бытия: Плавное, непрерывное масштабирование. Как растягивать сопли.
А что на практике-то?
А на практике, блядь, умные люди не выбирают одного. Они берут оба подхода и скрещивают, как бог черепаху с утконосом.
Делают основу на резиновой, плавной сетке — чтобы на промежуточных размерах всё было гладко. А потом, на самых критичных размерах (когда уже совсем пиздец и читать нельзя), врубают тяжёлую артиллерию адаптивных медиазапросов и перекраивают всё кардинально.
Получается и плавность, и контроль. Как умный начальник: в основном позволяет работать самостоятельно, но в случае ебалы — вмешивается жёстко и по делу. Идеально, ёпта!