Когда ты заходишь на сайт с телефона, а он выглядит как уменьшенная копия компьютерной версии — это бесит. Текст мелкий, кнопки не нажимаются, приходится увеличивать пальцами. В 2024 году так делать нельзя. Пользователи уходят с таких сайтов за секунды. Адаптивная верстка решает эту проблему. Она делает так, чтобы сайт подстраивался под любой экран: от умных часов до огромных мониторов. В этой статье я расскажу о современных методах, которые реально работают. Без воды, с примерами.

Почему старые методы уже не работают

Раньше верстальщики делали сайты с фиксированной шириной, например 960 пикселей. На мониторе это выглядело нормально. Но когда появились смартфоны, начался ад. Пришлось делать отдельные мобильные версии или использовать JavaScript для пересчета размеров. Это сложно, дорого и медленно. Сегодня CSS настолько прокачался, что можно обойтись без костылей. Главные инструменты — это медиазапросы, флексы и гриды. Они есть везде, даже в старых браузерах.

Правило: Не используй фиксированные размеры в пикселях для блоков. Всегда задавай ширину в процентах, vw, vh или с помощью clamp(). Это основа адаптивности.

Медиазапросы: база, которую нужно знать

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

/* Стили для мобильных устройств */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Но не пиши десятки медиазапросов для каждого блока. Это запутает код. Лучше используй мобильный подход (mobile-first). Сначала верстаешь для маленьких экранов, потом добавляешь условия для больших. Пример:

/* База для мобильных */
.card {
  width: 100%;
  margin-bottom: 15px;
}

/* Для планшетов и выше */
@media (min-width: 768px) {
  .card {
    width: 48%;
  }
}

/* Для десктопов */
@media (min-width: 1024px) {
  .card {
    width: 30%;
  }
}

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

Тип устройстваШирина экранаКоличество колонок
Телефондо 768px1
Планшет768px - 1024px2
Десктопболее 1024px3

Flexbox: гибкость без боли

Flexbox — это способ располагать элементы в строку или колонку. Он сам подстраивает размеры под контейнер. Например, тебе нужно сделать три карточки в ряд. На телефоне они должны быть одна под другой. На десктопе — рядом. Вот как это выглядит:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  flex: 1 1 300px; /* Растем, сжимаемся, минимум 300px */
}

Свойство flex: 1 1 300px означает: элемент может растягиваться (первая единица), сжиматься (вторая единица), но его базовая ширина — 300 пикселей. Если места мало, элементы переносятся на новую строку. Flexbox идеален для простых макетов: меню, карточки, списки иконок.

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

CSS Grid — это двумерная сетка. Ты задаешь строки и колонки, а элементы встают в ячейки. Grid крут, когда нужно сделать сложную структуру: шапка, сайдбар, контент, подвал. Пример:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Здесь repeat(auto-fit, minmax(250px, 1fr)) — магия. Браузер сам решает, сколько колонок поместится. Если ширина экрана 1200px, то будет 4 колонки по 250px. Если 500px — 2 колонки. Никаких медиазапросов не нужно. Grid отлично подходит для галерей, каталогов товаров, новостных лент.

Лайфхак: Используй minmax() вместе с auto-fit или auto-fill. Это заменяет 90% медиазапросов. Элементы сами подстраиваются под контейнер.

Относительные единицы и clamp: размеры без головной боли

Пиксели — зло для адаптивности. Они фиксированы. Используй проценты (%), vw (ширина окна), vh (высота окна), rem (размер шрифта корня). Но самый крутой инструмент — clamp(). Он задает минимальное, предпочтительное и максимальное значение. Пример:

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

Это значит: шрифт заголовка будет не меньше 1.5rem, не больше 3rem, а в идеале — 4% от ширины окна. На телефоне он маленький, на десктопе — большой. И никаких медиазапросов. Аналогично для ширины блоков:

.container {
  width: clamp(300px, 80%, 1200px);
}

Контейнер занимает 80% ширины, но не уже 300px и не шире 1200px. Идеально для адаптивных сайтов.

Как это работает в реальном проекте на PHP

Представь, ты делаешь интернет-магазин на PHP. Выводишь товары из базы данных. Чтобы верстка была адаптивной, не нужно писать сложный код. Просто оберни товары в контейнер с CSS Grid. Пример:

$products = [
  ['name' => 'Футболка', 'price' => 1500],
  ['name' => 'Джинсы', 'price' => 3000],
  ['name' => 'Кроссовки', 'price' => 5000],
];
?>


  
    

      

      
 руб.

И CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product-card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

Готово. На мобильном — одна карточка в ряд, на планшете — две, на десктопе — четыре. Без единого медиазапроса. PHP здесь просто генерирует HTML, а CSS делает всю адаптацию.

Итоговое резюме

Современная адаптивная верстка — это не магия, а правильное использование CSS. Запомни три главных правила: используй относительные единицы (clamp, %, vw, rem), применяй Flexbox и Grid для раскладки, и не злоупотребляй медиазапросами — они нужны только для сложных случаев. Если ты PHP-разработчик, не бойся верстки. Просто оберни динамический контент в адаптивные контейнеры, и твой сайт будет выглядеть отлично на любом устройстве. Пользователи скажут спасибо.

Студия WNDER