751 подписчик

Резиновая верстка: когда интерфейс тянется, а нервы — нет

СегодняСегодня

5 мин

Современный фронтенд давно живёт в мире, где один и тот же сайт могут открыть на телефоне, планшете, ноутбуке, ультрашироком мониторе и даже телевизоре. Экраны отличаются не только размерами, но и пропорциями, плотностью пикселей и сценариями использования. В таких условиях верстка должна уметь подстраиваться под пространство, а не диктовать ему свои правила. Именно здесь на сцену выходит резиновая верстка — подход, который делает интерфейс гибким, предсказуемым и устойчивым к изменению размеров окна браузера. Пользователи могут просматривать веб-страницы, используя множество вариантов устройств, каждое из которых обладает своей шириной экрана и своими особенностями. Поэтому важно, чтобы верстка выглядела хорошо на всех типах устройств, а не только «на компьютере дизайнера». При фиксированной верстке возникают классические боли: Фиксированные значения хороши только там, где мы полностью контролируем среду. В вебе это почти всегда не так. Резиновая верстка — это верстка, в которой разме

Оглавление

Разнообразие устройств — реальность, а не теория
Почему фиксированная верстка — проблема
Что такое резиновая верстка

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

Разнообразие устройств — реальность, а не теория

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

Почему фиксированная верстка — проблема

При фиксированной верстке возникают классические боли:

На широких мониторах сайт сиротливо стоит по центру, окружённый пустотой.
Если ширина сайта больше, чем ширина экрана — появляется горизонтальная прокрутка, которая моментально ухудшает UX.
Любое изменение контента или шрифта может сломать композицию.

Фиксированные значения хороши только там, где мы полностью контролируем среду. В вебе это почти всегда не так.

Что такое резиновая верстка

Резиновая верстка — это верстка, в которой размеры дочерних элементов подстраиваются под размеры их родительских блоков.
Проще говоря, страница «тянется».

Ключевые особенности:

Элементы масштабируются при изменении ширины окна;
Компоновка сохраняется;
Интерфейс выглядит предсказуемо.

Элементы остаются на местах

Важно не путать резиновую верстку с адаптивной или отзывчивой.

Резиновая верстка — элементы растягиваются и сжимаются, оставаясь на своих местах;
Адаптивная / responsive — на разных ширинах могут меняться сетки, порядок блоков и даже логика интерфейса.

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

Проценты вместо пикселей

Основа «резиновости» — относительные единицы измерения.

Вместо:

width: 400px;

используется:

width: 40%;

Почему это работает

Проценты вычисляются от размеров родительского блока, поэтому элемент автоматически подстраивается под доступное пространство.

Ширина в процентах

Чтобы сделать верстку резиновой, нужно позволить блокам растягиваться:

width: 100%;

или

width: 40%;

В этом случае ширина блока:

Рассчитывается динамически;
Напрямую зависит от ширины родителя;
Корректно меняется при ресайзе окна.

Ширина родителя в процентах

Если задать родительскому контейнеру:

мы получаем блок, который занимает всю ширину окна браузера, независимо от его размеров. Все вложенные элементы начинают масштабироваться относительно него — и цепочка резиновости замыкается.

Высота в процентах: не всё так просто

С высотой ситуация сложнее, чем с шириной.

По умолчанию:

Элементы с display: block имеют height: auto;
Высота определяется содержимым.

Когда проценты по высоте работают

Высота в процентах будет работать только если у родителя задана явная высота, отличная от auto.

Не указывайте фиксированную высоту

Фиксированная высота — почти всегда плохая идея:

Мы не знаем, сколько контента будет внутри;
Текст может увеличиться;
Перевод на другой язык может сломать блок.

Результат — контент «наезжает» на соседние элементы и ломает верстку.

Размер шрифта в процентах

Размер шрифта тоже можно задавать в процентах:

В этом случае размер шрифта .btn будет вычисляться от размера шрифта родителя.

Меняем сразу везде

Если изменить font-size у .container, кнопка автоматически подстроится. Это удобно:

Для масштабирования интерфейса;
Для темизации;
Для поддержки accessibility.

Вертикальные отступы тоже считаются от ширины

Важный момент, который часто удивляет:

margin-top, margin-bottom, padding-top, padding-bottom, заданные в процентах, рассчитываются от ширины блока, а не от высоты.

Поэтому:

padding: 1%;

— это не «1% по вертикали», а 1% от ширины элемента.

Flexbox — лучший друг резиновой верстки

CSS Flexbox (Flexible Box Layout Module) — это модуль гибкой раскладки элементов, который идеально ложится на философию резиновой верстки.

Почему Flexbox облегчает работу

Простая и логичная модель;
Автоматическая подстройка элементов;
Управление направлением, выравниванием и размерами;
Минимум костылей.

Как только родителю задано:

display: flex;

он становится flex-контейнером, а его дочерние элементы — flex-элементами.

В строку по умолчанию

По умолчанию flex-элементы выстраиваются:

Вдоль главной оси;
Слева направо;
В одну строку.

Главная ось при этом горизонтальная.

Подстройка под контент

Если внутри flex-контейнера несколько элементов разной высоты:

Контейнер примет высоту самого высокого элемента;
Все остальные элементы визуально подстроятся под него.

Это решает множество старых проблем с колонками одинаковой высоты.

flex-direction — управление направлением

Свойство flex-direction позволяет менять направление главной оси.

Значения:

row — по умолчанию, слева направо;
row-reverse — справа налево;
column — сверху вниз;
column-reverse — снизу вверх.

При смене направления меняются местами главная и дополнительная оси.

Не нужно переопределять свойства

Одна из сильных сторон flexbox — прогрессивное улучшение.

Например, float не работает внутри flex-контейнера, поэтому старые стили просто перестают влиять на layout. Это позволяет аккуратно обновлять верстку без переписывания всего CSS.

Кратко о резиновой верстке

Размеры дочерних элементов зависят от родителей;
Элементы остаются на местах при изменении ширины окна;
Основа — относительные единицы измерения (проценты).

Размеры в процентах: важные нюансы

Ширина в процентах считается от ширины родителя;
Высота в процентах работает только при заданной высоте родителя;
Фиксированной высоты лучше избегать;
Абсолютно позиционированный элемент считает проценты от ближайшего не статичного родителя;
position: fixed считает проценты от окна браузера.