Каждый из нас хоть раз открывал сайт с телефона и видел, как всё съезжает, текст мелкий, а кнопки не нажимаются. Знакомо? Это боль. Адаптивная верстка — это способ сделать сайт удобным на любом экране. В этой статье разберем, какие методы сегодня в тренде, как их применять на практике и что делать, чтобы ваш сайт не отпугивал пользователей.

Digital-студия WNDER

Что такое адаптивность и почему она важна

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

Почему это критично? По данным статистики, больше половины трафика в интернете — с мобильных устройств. Если ваш сайт неудобен на телефоне, люди просто уйдут к конкурентам. Плюс поисковики, вроде Google, учитывают мобильную версию при ранжировании. Так что адаптивность — это не просто модно, а жизненно необходимо.

Правило: всегда начинайте разработку с мобильной версии (mobile-first). Это проще, быстрее и заставляет фокусироваться на главном.

Основы: относительные единицы и медиазапросы

Раньше верстальщики использовали пиксели для размеров шрифтов и блоков. Но пиксель — фиксированная единица, и на маленьком экране текст может стать нечитаемым. Современный подход — относительные единицы: em, rem, %, vw/vh.

  • rem — зависит от размера шрифта корневого элемента (обычно 16px). Удобно для задания отступов и размеров текста.
  • em — зависит от родителя. Иногда полезно, но легко запутаться.
  • % — для ширины блоков. Позволяет элементам растягиваться на всю доступную ширину.
  • vw/vh — 1% от ширины/высоты окна. Хорошо для полноэкранных секций.

Медиазапросы — это как условные операторы в CSS. Вы задаете условие (например, ширина экрана меньше 768px) и внутри пишете правила, которые применятся только в этом случае.

/* Базовые стили для мобильных */
.container {
  width: 100%;
  padding: 10px;
}

/* Стили для планшетов и больше */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Стили для десктопа */
@media (min-width: 1024px) {
  .container {
    width: 980px;
  }
}

Но медиазапросы — это только база. Современные методы позволяют делать адаптивность более гибкой и с меньшим количеством кода.

Flexbox: гибкая раскладка без боли

Flexbox (или флексбокс) — это модуль CSS, который позволяет выстраивать элементы в ряд или колонку и управлять их распределением. Он идеален для одномерных раскладок (либо ряд, либо колонка).

Допустим, у вас есть меню с пунктами. На десктопе они должны быть в одну линию, а на мобильном — в столбик. С flexbox это делается в пару строк.

.menu {
  display: flex;
  flex-wrap: wrap; /* разрешаем перенос на новую строку */
}

.menu-item {
  flex: 1 1 200px; /* каждый пункт может расти, сжиматься, базовый размер 200px */
}

@media (max-width: 600px) {
  .menu {
    flex-direction: column; /* на мобильных — в столбик */
  }
}

Ключевые свойства flexbox:

Свойство Что делает
display: flex Включает flex-контекст для дочерних элементов
justify-content Выравнивание по главной оси (горизонтально, если direction: row)
align-items Выравнивание по поперечной оси (вертикально)
flex-wrap Разрешает или запрещает перенос элементов
flex-grow, flex-shrink, flex-basis Управление размером элементов в контейнере

Flexbox отлично подходит для выравнивания элементов по центру, создания колонок одинаковой высоты и навороченных шапок.

CSS Grid: мощная сетка для сложных макетов

Если flexbox — для одномерных раскладок, то CSS Grid — для двумерных. Вы можете разделить страницу на колонки и строки одновременно и размещать элементы по сетке. Это революция в верстке.

Представьте, что вам нужно сделать каркас сайта: шапка, подвал, контент и боковая панель. С grid это делается легко:

.layout {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar content'
    'footer footer';
  grid-template-columns: 1fr 3fr; /* первая колонка 1 часть, вторая 3 части */
  gap: 10px; /* отступы между ячейками */
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Теперь на мобильном устройстве мы можем переопределить сетку:

@media (max-width: 600px) {
  .layout {
    grid-template-areas:
      'header'
      'content'
      'sidebar'
      'footer';
    grid-template-columns: 1fr; /* одна колонка */
  }
}

Обратите внимание, как легко мы переместили блоки — просто изменяем шаблон. Никаких дополнительных классов и танцев с бубном.

Grid также поддерживает автоматическое размещение элементов, что удобно для галерей или списков карточек:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

Эта строка говорит: «Создай столько колонок, сколько поместится, каждая минимум 200px и максимум 1 часть ширины». И это работает без единого медиазапроса!

Современные методы: clamp, container queries и логические свойства

Но на этом прогресс не остановился. В 2024 году у нас есть еще более продвинутые инструменты.

Функция clamp()

Позволяет задать размер, который плавно меняется в зависимости от ширины экрана. Например, шрифт, который на телефоне 16px, на десктопе 24px, а между ними — плавно растет.

body {
  font-size: clamp(16px, 2vw, 24px);
  /* минимум 16px, оптимально 2% от ширины окна, максимум 24px */
}

Это избавляет от кучи медиазапросов для мелких подстроек.

Container queries

Раньше адаптация была только к размеру окна браузера. Но что, если компонент находится в контейнере, который сам по себе меняет размер? На помощь приходят контейнерные запросы. Вы говорите: «Когда ширина родителя меньше 400px, примени такие стили». Это очень удобно для карточек, которые могут находиться в разных местах страницы.

.card-container {
  container-type: inline-size; /* указываем, что это контейнер */
}

.card {
  display: flex;
}

@container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
}

Логические свойства

Вместо привязки к лево/право, логические свойства используют начало и конец строки. Это упрощает поддержку языков с направлением письма справа налево (например, арабский).

.box {
  margin-inline: auto; /* горизонтальное центрирование */
  padding-inline: 20px; /* отступ слева и справа */
}

Практические советы и лайфхаки

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

  • Не перегружайте медиазапросами. Используйте flexbox, grid, clamp() и контейнерные запросы, чтобы большинство адаптации происходило автоматически.
  • Тестируйте на реальных устройствах. Инструменты разработчика в браузере — это хорошо, но ничто не заменит настоящий телефон и планшет.
  • Используйте относительные единицы для шрифтов и отступов, чтобы пользователь мог менять размер текста в настройках браузера.
  • Не забывайте про touch-цели. Кнопки должны быть не меньше 48x48px, чтобы по ним было удобно попадать пальцем.
Лайфхак: используйте CSS-переменные (custom properties) для хранения основных значений (цвета, отступы, размеры). Тогда адаптация превращается в изменение пары переменных в медиазапросе, а не переписывание кучи стилей.

Что в итоге

Адаптивная верстка перестала быть просто набором медиазапросов. Теперь это целая экосистема инструментов, которые позволяют создавать гибкие и отзывчивые интерфейсы с минимальными усилиями. Используйте flexbox для простых раскладок, grid для сложных сеток, не забывайте про clamp() и контейнерные запросы, и ваш сайт будет идеально выглядеть на любом экране.

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

Если вам нужна помощь с адаптивной версткой или разработкой сайта под ключ, обращайтесь в студию WNDER — мы знаем, как сделать ваш проект удобным и современным.

Студия WNDER