Адаптивная вёрстка на CSS: чем она отличается от фиксированного макета

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

Адаптивность — не набор версий «для телефона, планшета и компьютера». Это способность интерфейса работать в непрерывном диапазоне ширин, при увеличенном шрифте и разном количестве содержимого.

Начните с viewport

<meta name="viewport" content="width=device-width, initial-scale=1">​

Без этой мета-настройки мобильный браузер может использовать виртуальную широкую область и уменьшать страницу. Не добавляйте maximum-scale=1 или user-scalable=no: это мешает пользователю увеличивать текст.

Гибкий контейнер

Фиксированная версия:

.container {  width: 1200px;  margin-inline: auto;}​

На экране 320 px такой блок не помещается. Гибкая версия:

.container {  inline-size: min(100% - 2rem, 75rem);  margin-inline: auto;}​

Контейнер получает поля на узком экране и ограничение ширины на широком.

Подход mobile first

Сначала задайте одноколоночный базовый вариант, затем добавьте улучшения при наличии места:

.article-layout {  display: grid;  gap: 2rem;}​@media (min-width: 60rem) {  .article-layout {    grid-template-columns: minmax(0, 1fr) 18rem;    align-items: start;  }}​

До 60rem содержимое идёт естественным потоком. После breakpoint появляется боковая колонка. Выбирайте точку перехода по моменту, когда композиции не хватает места, а не по названию популярного устройства.

Flexbox для ряда компонентов

.card-list {  display: flex;  flex-wrap: wrap;  gap: 1.5rem;}​.card-list__item {  flex: 1 1 18rem;  min-inline-size: 0;}​

Карточки переносятся без списка медиазапросов. min-inline-size: 0 позволяет элементу с длинным текстом сжиматься в пределах ряда.

Grid без жёстких breakpoint

.card-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));  gap: clamp(1rem, 3vw, 2rem);}​

Количество колонок определяется доступным местом. Внутренний min(100%, 17rem) не даёт минимальной ширине раздвинуть очень узкий контейнер.

Не каждая сетка должна быть «резиновой». Если смысл требует конкретного перестроения навигации или порядка, явный медиазапрос понятнее.

Адаптивная типографика

.hero__title {  font-size: clamp(2rem, 1.4rem + 3vw, 4.5rem);  line-height: 1.05;}​.article__body {  max-inline-size: 70ch;}​

Ограничивайте минимум и максимум. Размер текста не должен становиться микроскопическим на узком экране или зависеть только от vw.

Изображения и медиа

img,video {  max-inline-size: 100%;  block-size: auto;}​

Для разных размеров файла используйте srcset и sizes в HTML. У карточек можно зафиксировать медиапропорцию через aspect-ratio и осознанно выбрать object-fit.

Встроенный контент не должен раздвигать страницу:

.video-frame {  aspect-ratio: 16 / 9;}​.video-frame iframe {  inline-size: 100%;  block-size: 100%;  border: 0;}​

Контейнерные запросы

Иногда компонент должен реагировать не на окно, а на собственную колонку:

.card-region {  container-type: inline-size;}​.card {  display: grid;  gap: 1rem;}​@container (min-width: 32rem) {  .card {    grid-template-columns: 10rem minmax(0, 1fr);  }}​

Одна карточка адаптируется в сайдбаре и основной ленте без знания ширины viewport.

Что нельзя «исправлять» скрытием

body {  overflow-x: hidden;}​

Это часто маскирует элемент, который шире страницы, и может обрезать фокус или содержимое. Найдите источник переполнения: фиксированную ширину, длинную строку, transform или неверную сетку.

Жёсткая height у текстовой карточки тоже не делает её адаптивной. Используйте естественную высоту или min-height.

Как тестировать

Не ограничивайтесь тремя пресетами DevTools. Проверьте:

• весь диапазон 320–1440 px и промежуточные значения;
• портретную и альбомную ориентацию;
• масштаб 200%;
• клавиатурный фокус и открытые меню;
• длинные заголовки, пустые данные и дополнительные карточки;
• реальные изображения с разными пропорциями;
• reduced motion и предпочтительную цветовую схему, если они поддерживаются;
• отсутствие горизонтальной прокрутки у документа.

Что запомнить

Адаптивная вёрстка строится на гибких размерах, естественном потоке, Grid и Flexbox. Медиазапросы добавляют композиционные изменения там, где содержимому действительно не хватает места. Проверяйте не устройства, а непрерывный диапазон, увеличение текста и реальные крайние состояния.

report Сообщить об ошибке в статье