Верстка сайтов, которые выглядят хорошо на любом устройстве — от старого монитора до смартфона — это не роскошь, а необходимость. Если ваш сайт криво отображается на телефоне, пользователь уйдет к конкуренту. В этой статье я, как PHP-разработчик с десятилетним стажем, расскажу, как сделать адаптивную верстку без боли. Мы пройдемся по главным инструментам: Flexbox, CSS Grid, медиа-запросам и относительным единицам. Будет много примеров и лайфхаков.

Flexbox — гибкая коробка для раскладки

Flexbox (Flexible Box Layout) появился, чтобы решить проблему с выравниванием элементов. Раньше мы мучились с float и clearfix, а теперь достаточно задать контейнеру display: flex. Flexbox работает в одну ось — горизонтальную или вертикальную. Он идеален для меню, карточек товаров или центровки блока по центру.

Пример: у нас есть три блока, которые должны быть в ряд и равномерно распределены по ширине. Вот как это делается:

<div class="container">
  <div class="item">Блок 1</div>
  <div class="item">Блок 2</div>
  <div class="item">Блок 3</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .item {
    flex: 1;
    margin: 10px;
  }
</style>

Здесь justify-content: space-between распределяет элементы с равными промежутками между ними. А flex: 1 заставляет каждый блок занимать равную долю свободного пространства. Просто и понятно.

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

Если Flexbox — это одномерная раскладка, то CSS Grid — двумерная. Вы задаете строки и столбцы, и элементы автоматически заполняют сетку. Grid идеален для главных страниц, галерей или любых макетов, где нужно точное позиционирование.

Допустим, нужно создать сетку из 3 колонок одинаковой ширины. Пишем:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

1fr — это доля от свободного пространства. Три колонки по 1fr делят ширину поровну. А gap добавляет отступы между ячейками. Можно сделать и сложнее: например, одну колонку фиксированной ширины, а остальные — резиновые.

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

Медиа-запросы — когда всё ломается

Медиа-запросы (media queries) — это условные правила CSS, которые срабатывают при определенных параметрах экрана: ширине, высоте, ориентации. Без них адаптивность неполная. Вы задаете точку перелома (breakpoint), и при достижении этой ширины стили меняются.

Пример: на экранах шире 768px у нас три колонки, а на мобильных — одна колонка.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

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

Здесь при ширине экрана меньше 768px сетка превращается в один столбец. Классика. Но не перебарщивайте с точками перелома. Обычно хватает 2-3: для телефонов, планшетов и десктопов.

Правило: Не используйте фиксированные пиксели для ширины элементов. Вместо этого применяйте проценты, vw (viewport width) или fr. Так дизайн будет гибким и не сломается на нестандартных экранах.

Относительные единицы: rem, em, vw, vh

Адаптивная верстка невозможна без относительных единиц. Вот краткая таблица:

Единица Относительно чего Когда использовать
rem Размер шрифта корневого элемента (html) Для шрифтов и отступов, чтобы всё масштабировалось от базового размера
em Размер шрифта родительского элемента Для компонентов, которые должны масштабироваться относительно своего контейнера
vw 1% от ширины окна просмотра Для блоков, которые должны занимать часть экрана (например, 50vw — половина ширины)
vh 1% от высоты окна просмотра Для полноэкранных секций (100vh — вся высота экрана)

Пример: чтобы заголовок был крупным на больших экранах и уменьшался на мобильных, используйте clamp() или комбинацию rem и vw.

h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

clamp() задает минимальное, предпочтительное и максимальное значение. Шрифт будет всегда в этих пределах.

Практический пример: адаптивная карточка товара

Давайте соберем всё вместе. Представьте, что вы пишете интернет-магазин на PHP. Вам нужно вывести карточки товаров. На десктопе — три колонки, на планшете — две, на телефоне — одна. Вот как это сделать:

<div class="product-grid">
  <div class="product-card">
    <img src="product.jpg" alt="Товар" style="width: 100%;">
    <h3>Название товара</h3>
    <p>Цена: 1000 руб.</p>
  </div>
</div>

<style>
  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
  }
  .product-card {
    border: 1px solid #ddd;
    padding: 15px;
  }
  @media (max-width: 1024px) {
    .product-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 600px) {
    .product-grid {
      grid-template-columns: 1fr;
    }
  }
</style>

Здесь repeat(3, 1fr) создает три колонки. Медиа-запросы меняют количество колонок в зависимости от ширины. А картинка с width: 100% подстраивается под контейнер.

Итог: адаптивная верстка — это не магия. Используйте Flexbox для простых раскладок, CSS Grid для сложных сеток, медиа-запросы для перестроения на разных экранах, а относительные единицы для гибкости. Не забывайте про тестирование на реальных устройствах. И помните: хорошая верстка — это когда сайт одинаково удобен и на 27-дюймовом мониторе, и на 5-дюймовом телефоне.

Студия WNDER