Резиновый макет: принципы построения и отличие от адаптивного

Что такое резиновый макет

Резиновый макет (liquid layout, fluid layout) — подход к вёрстке, при котором размеры элементов задаются в относительных единицах, а не в фиксированных пикселях. Это позволяет странице масштабироваться вместе с окном браузера без горизонтальной прокрутки.

Концепция резиновой вёрстки возникла ещё в эпоху десктопных мониторов с разным разрешением. В 2000-х годах сайты с фиксированной шириной 960 пикселей плохо смотрелись на 15-дюймовых и 30-дюймовых мониторах. Резиновый макет решил эту проблему.

По данным Web Almanac (2024), 78% современных сайтов используют элементы резиновой вёрстки через относительные единицы. Чисто резиновые макеты встречаются реже — в основном в дашбордах и панелях управления.

Исторический контекст

Резиновая вёрстка стала популярной после выхода статьи Джона Оллсоппа «A Dao of Web Design» в 2000 году, где он призвал отказаться от фиксированных пикселей в пользу относительных единиц. Этот манифест заложил философскую основу для всего респонсив-дизайна.

Относительные единицы измерения: проценты, vw, vh

Основные относительные единицы в CSS делятся на две группы: относительно родительского элемента (проценты) и относительно viewport (vw, vh, vmin, vmax). Каждая группа решает свои задачи в резиновой вёрстке.

/* Percent — width relative to parent */
.sidebar {
    width: 30%;
}

.content {
    width: 70%;
}

/* vw/vh — viewport-based units */
.hero-section {
    width: 100vw;
    height: 80vh;
}

.fullscreen-modal {
    width: 90vmin;
}

Проценты вычисляются относительно ширины родительского контейнера. Вложенные проценты могут создавать каскадные расчёты, которые иногда дают неожиданные результаты. Единицы vw/vh привязаны к viewport и игнорируют родительские контейнеры — это удобно для полноэкранных секций.

Единица rem для шрифтов

В резиновой вёрстке важно не только задавать ширину блоков в относительных единицах, но и размер шрифта. Единица rem (root em) привязывает размер текста к корневому элементу HTML. Изменив font-size на html, можно масштабировать весь текст на странице.

/* Global text scaling via rem */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

.heading {
    font-size: 2.4rem; /* = 24px */
}

.body-text {
    font-size: 1.6rem; /* = 16px */
}

Резиновый vs адаптивный макет

Главное отличие между резиновым и адаптивным макетом — характер изменения ширины. Резиновый макет меняется непрерывно при любом изменении окна, а адаптивный — дискретно через медиа-запросы.

Резиновый макет — непрерывное масштабирование, адаптивный — переключение между фиксированными макетами. У каждого подхода есть сильные и слабые стороны.

На практике большинство современных сайтов используют гибридный подход: резиновая сетка с относительными единицами + медиа-запросы для критических брейкпоинтов. Чисто резиновая вёрстка без медиа-запросов может выглядеть неаккуратно на очень широких или очень узких экранах.

Как реализовать резиновую вёрстку на CSS

Базовая реализация резинового макета включает три компонента: относительные единицы ширины, максимальные/минимальные ограничения и flexbox или grid для распределения пространства.

/* Fluid grid with Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Fluid grid with CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Flexbox-подход с flex: 1 1 30% создаёт карточки, которые занимают примерно 30% ширины контейнера, но могут сужаться до 250px. Когда карточек много, они переносятся на следующую строку. Grid-подход с auto-fit и minmax автоматически создаёт колонки, которые вмещаются в контейнер.

Ограничения: min-width и max-width

Ключевая проблема чисто резиновой вёрстки — на очень широких экранах строка текста растягивается до 2000+ пикселей, что делает чтение невозможным. Для решения используются CSS-свойства min-width, max-width.

/* Container limits for readability */
.content-wrapper {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

max-width: 1200px предотвращает растягивание контента на сверхшироких мониторах. min-width: 320px гарантирует минимальную ширину контейнера на маленьких экранах. Комбинация width: 90% + max-width создаёт резиновый контейнер с потолком — наиболее популярный паттерн в современном веб-дизайне.

По данным HTTP Archive (2025), 92% сайтов в топ-1000 используют max-width для контентных блоков. Стандартное значение — 1140–1200 пикселей для десктопных макетов.

Гибридный подход: резиновый + адаптивный

Современный веб-дизайн редко использует резиновый или адаптивный подход в чистом виде. Гибридный метод сочетает преимущества обоих: резиновая сетка на относительных единицах + медиа-запросы для глобальных перестроек.

/* Hybrid: fluid base + media query */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

На десктопе макет использует резиновые колонки 1fr и 3fr — соотношение сохраняется при любой ширине окна. На мобильных медиа-запрос переключает на одноколоночную схему, где колонки располагаются вертикально.

Преимущество гибридного подхода — разработчик пишет меньше медиа-запросов, так как резиновая сетка автоматически подстраивается под промежуточные размеры. Медиа-запросы нужны только для критических изменений структуры, а не для каждого шага ширины экрана.