Резиновая верстка (англ. fluid, или liquid layout) — это способ построения страницы, при котором ширина блоков задаётся в относительных единицах, и элементы плавно тянутся вслед за шириной окна браузера без переключения между заранее нарисованными макетами. Базовый приём — процент от контейнера плюс ограничитель ширины:
.container {
width: 90%; /* тянется за окном */
max-width: 1200px; /* но не шире этого */
margin: 0 auto; /* по центру */
}
Один макет обслуживает и смартфон, и десктоп: контейнер сжимается на узком экране и растягивается на широком, оставаясь в заданных рамках. Ниже — чем резиновая верстка отличается от фиксированной, адаптивной и отзывчивой, какие единицы и свойства её собирают и где вместо неё нужны медиа-запросы.
- Суть — ширины в процентах,
vw,fr; работу по подгонке макета делает браузер, а не набор фиксированных версий. - Рамки —
min-widthиmax-widthдержат блок в читаемом диапазоне, чтобы он не растекался и не сплющивался. - Каркас — Flexbox для компонентов и Grid для сетки страницы; оба гибкие по своей природе.
- Типографика —
clamp()масштабирует шрифт вместе с экраном без единого медиа-запроса. - Граница применимости — резина сама держит потяжку; переключить одноколоночник в три колонки может только медиа-запрос.
Чем резиновая верстка отличается от фиксированной, адаптивной и отзывчивой
Четыре термина постоянно путают, потому что три из них про «подстройку под экран». Разница — в механике: тянется макет плавно или переключается скачками, и на каких единицах он собран.
| Тип верстки | Единицы | Как ведёт себя при изменении экрана | Медиа-запросы |
|---|---|---|---|
| Фиксированная (fixed) | px | Жёсткая ширина. На узком экране появляется горизонтальная прокрутка, на широком — пустые поля по краям. | Не нужны |
| Резиновая (fluid / liquid) | %, vw, fr, rem | Блоки плавно растягиваются и сжимаются за окном. Порядок и число колонок не меняются. | Обычно не нужны или минимум |
| Адаптивная (adaptive) | px в брейкпоинтах | Несколько фиксированных макетов (телефон, планшет, десктоп). Между брейкпоинтами макет не меняется, на границе переключается скачком. | Ключевой механизм |
| Отзывчивая (responsive) | Относительные + брейкпоинты | Гибрид: между брейкпоинтами тянется как резина, на брейкпоинтах перестраивает сетку (например, из трёх колонок в одну). | Ключевой механизм |
Термин «отзывчивый дизайн» (responsive web design) ввёл Итан Маркотт в 2010 году, описав связку из трёх приёмов: резиновые сетки, резиновые изображения и медиа-запросы (MDN). То есть резиновая верстка — это фундамент, на который отзывчивость добавляет переключение раскладки. Адаптивная же строит несколько отдельных фиксированных версий и подставляет подходящую. На практике сегодня почти всегда делают отзывчивую верстку: резина как база плюс несколько брейкпоинтов на крайние случаи.
Вывод раздела: резиновая — плавная растяжка одного макета; адаптивная — переключение фиксированных версий; отзывчивая — сочетание того и другого.
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
- Где и как применять? Потестируем модель после установки на разных задачах
- Как дообучить модель под себя?
Относительные единицы — основа резиновой верстки
Резиновая верстка держится на относительных единицах: их значение вычисляется от чего-то (от родителя, корня, вьюпорта), а не прибивается к пикселям. Точные определения — по справочнику MDN:
- % — процент от соответствующего размера родительского блока. Главная единица классической резины:
width: 50%— половина ширины контейнера. - em — относительно
font-sizeсамого элемента (а на свойствеfont-size— относительно унаследованного). Удобно для отступов, кратных шрифту. - rem — относительно
font-sizeкорневого элемента<html>(по умолчанию в браузере обычно 16px). Не зависит от вложенности, поэтому предсказуемееem. - vw — 1% ширины вьюпорта. При ширине окна 800px значение
50vwравно 400px. - vh — 1% высоты вьюпорта. При высоте 300px значение
70vhравно 210px. - vmin / vmax — меньшая и большая из
vwиvhсоответственно. Полезны для элементов, которые должны влезать по короткой стороне экрана.
Практический смысл: замена width: 960px на width: 80% уже делает блок резиновым. Замена font-size: 32px на font-size: 2rem связывает шрифт с базовым размером и упрощает масштабирование всей типографики разом.
Flexbox и Grid — современный каркас резины
Раньше резиновые сетки собирали на процентных float-колонках и вручную считали ширины. Сегодня современные механизмы раскладки резиновые по своей природе: Flexbox и Grid распределяют свободное место сами.
Flexbox хорош для компонентов в ряд — меню, карточек, панелей. Свойство flex: 1 заставляет элементы делить свободное место поровну и сжиматься при нехватке:
.row {
display: flex;
gap: 20px;
}
.row .item {
flex: 1; /* делят ширину поровну */
min-width: 0; /* разрешает сжиматься ниже контента */
}
Grid отвечает за сетку страницы. Единица fr — это доля свободного места дорожки, полностью резиновая:
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* доли, а не пиксели */
gap: 24px;
}
Приём repeat(auto-fit, minmax(240px, 1fr)) даёт сетку карточек, которая сама решает, сколько колонок влезет, — резина и переток в одном свойстве, без медиа-запросов:
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
Вывод раздела: Grid — под общую сетку страницы, Flexbox — под компоненты внутри неё; фиксированных px-ширин в дорожках лучше избегать.
min-width и max-width — рамки, чтобы резина не поехала
Чистая резина без ограничений вредит читаемости: на 4K-мониторе строка текста растянется на весь экран, а на узком — сплющится в столбик из одного слова. Ограничители держат блок в диапазоне:
.content {
width: 90%;
max-width: 720px; /* строка не длиннее комфортных ~70 символов */
min-width: 320px; /* не уже минимального читаемого блока */
margin: 0 auto;
}
Пара width в процентах плюс max-width в пикселях — самая частая и надёжная конструкция резиновой верстки. Блок тянется, пока не упрётся в потолок, дальше центрируется полями. Функции min(), max() и clamp() позволяют записать те же рамки одной строкой, например width: min(90%, 720px).
Картинки и медиа в резиновом макете
Фиксированные размеры картинок ломают резину: широкое изображение вылезает за контейнер и вызывает горизонтальную прокрутку. Стандартное правило делает медиа резиновыми — они не превышают ширину контейнера, но и не раздуваются больше своего исходного размера:
img,
picture,
video {
max-width: 100%;
height: auto; /* сохраняет пропорции */
}
По MDN резиновые изображения уменьшаются вместе с колонкой, когда та сужается, и не растут выше собственного размера, когда колонка расширяется. Для мобильных обязателен и мета-тег вьюпорта — без него телефон рисует страницу в условные 980px и потом уменьшает её целиком:
<meta name="viewport" content="width=device-width, initial-scale=1">
Современный подход: clamp() для резиновой типографики
Долго шрифт масштабировали ступеньками через медиа-запросы: один font-size до 768px, другой после. Функция clamp() убирает эти ступеньки. Она зажимает значение между минимумом и максимумом, а между ними даёт плавный, привязанный к экрану рост:
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
}
Синтаксис — clamp(MIN, VAL, MAX), и работает он как max(MIN, min(VAL, MAX)). В примере заголовок не станет меньше 1.75rem и не превысит 3rem, а между этими границами тянется как 5vw. По MDN это даёт тот же эффект, что и резиновая типографика на медиа-запросах, но в одну строку и без них. Тем же приёмом задают резиновые отступы: padding: clamp(1rem, 4vw, 3rem). Это и есть современная резина: единицы вьюпорта плюс clamp() вместо россыпи брейкпоинтов.
Как сделать блок резиновым: пошагово
Порядок действий, который превращает фиксированный макет в резиновый и держит его в рамках. Схема-памятка ниже собирает эти шаги в один маршрут.
- Контейнер — задайте ширину в процентах и потолок:
width: 90%; max-width: 1200px; margin: 0 auto. Это скелет резины. - Сетка — внутренние колонки на Grid (
fr) или Flexbox (flex: 1), без фиксированных px-ширин. - Типографика и отступы —
clamp(min, vw, max)дляfont-sizeи крупныхpadding, чтобы масштаб шёл плавно. - Картинки — глобально
img { max-width: 100%; height: auto }, плюс мета-тег вьюпорта в<head>. - Крайние случаи — там, где резина уже не спасает (три колонки не влезают в телефон), добавьте точечный медиа-запрос для перестройки сетки.
Когда хватает резины, а когда нужны медиа-запросы
Резиновая верстка и медиа-запросы — не альтернативы, а слои. Резина работает непрерывно и покрывает 80% случаев масштабирования. Медиа-запрос нужен там, где меняется не размер, а структура.
Хватает резины: блок тянется по ширине; шрифт и отступы растут плавно (clamp()); сетка карточек сама решает число колонок (auto-fit + minmax); картинки не вылезают за контейнер.
Нужен медиа-запрос: перестроить многоколоночник в один столбец на мобильном; спрятать или показать элемент (боковое меню → бургер); сменить направление Flexbox с row на column; поменять композицию Grid целиком.
.layout {
display: grid;
grid-template-columns: 250px 1fr; /* сайдбар + контент */
}
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr; /* на мобильном — один столбец */
}
}
Вывод раздела: сначала соберите резиновую базу на относительных единицах и clamp(), а медиа-запросы добавляйте точечно — только под смену структуры, а не под каждый пиксель.
Частые вопросы о резиновой верстке
Резиновая и адаптивная верстка — это одно и то же?
Нет. Резиновая тянет один макет плавно на относительных единицах. Адаптивная подставляет один из нескольких заранее сделанных фиксированных макетов на брейкпоинтах. Резиновая меняется непрерывно, адаптивная — скачками.
В чём разница между резиновой и отзывчивой версткой?
Резиновая только растягивает блоки. Отзывчивая (responsive) добавляет к резине медиа-запросы и на брейкпоинтах перестраивает саму сетку — например, из трёх колонок в одну. Резина — фундамент отзывчивости.
Какие единицы использовать для резиновой верстки?
Для ширин — проценты и fr в Grid; для шрифтов и отступов — rem и clamp() с единицами вьюпорта (vw). Пиксели оставляют для тонких границ и небольших фиксированных элементов.
Нужны ли медиа-запросы при резиновой верстке?
Для простого сайта часто нет: контейнер в процентах, Grid с auto-fit и clamp() покрывают масштабирование. Медиа-запросы добавляют там, где нужно сменить структуру макета, а не просто размер.
Как сделать картинки резиновыми?
Задать глобально img { max-width: 100%; height: auto }. Тогда изображение сжимается вместе с контейнером и не вылезает за его пределы, сохраняя пропорции.
Что такое clamp() и зачем он в резиновой верстке?
Это CSS-функция clamp(MIN, VAL, MAX): зажимает значение между минимумом и максимумом, а между ними масштабирует плавно. Позволяет сделать резиновый шрифт и отступы одной строкой, без медиа-запросов.
Обновлено в 2026 году. Материал редакции «Я — зерокодер»: разбираем фронтенд-практики для тех, кто собирает сайты без глубокого погружения в код.
- Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
- УЧАСТВОВАТЬ ЗА 0 РУБ.
- Расскажем, как получить подписку
- ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
