В чем разница между адаптивным (responsive) и резиновым (fluid) дизайном в веб-вёрстке?

Оба подхода помогают создавать интерфейсы для разных размеров экрана, но используют разные механизмы.

Адаптивный дизайн (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%; /* Отступы также относительные */
}

Суть: Плавное, непрерывное масштабирование.

Практика

Современная вёрстка обычно комбинирует оба подхода: используется резиновая сетка на относительных единицах, которая дополняется адаптивными медиазапросами для кардинальной перестройки структуры на контрольных точках. Это обеспечивает и плавность, и контроль над читабельностью на крайних размерах.