Когда вы открываете сайт с телефона, а он выглядит как уменьшенная копия десктопной версии — это бесит. Кнопки крошечные, текст нечитаемый, а чтобы нажать ссылку, приходится увеличивать пальцами. Знакомо? Сегодня мы разберем, как с помощью CSS медиазапросов сделать так, чтобы ваш сайт был удобным на любом устройстве: от старенького смартфона до огромного монитора. Я объясню все простыми словами, с примерами, которые можно сразу скопировать и попробовать.

Digital-студия WNDER

Что такое медиазапросы и зачем они нужны

Представьте, что вы дизайнер и вам нужно нарисовать одну и ту же визитку, но так, чтобы она выглядела хорошо и на маленьком брелоке, и на рекламном щите. Вы бы использовали разные шрифты и расположение элементов, верно? Вот и сайт должен подстраиваться под размер экрана. Медиазапросы — это как раз тот инструмент, который говорит браузеру: «Если экран такой-то ширины, применяй вот эти стили».

Медиазапрос — это правило CSS, которое срабатывает только при выполнении определенных условий, например, при ширине экрана до 600 пикселей. Пишется он так:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Этот код говорит: если ширина экрана меньше или равна 600 пикселям, то фон страницы станет голубым. Удобно, правда?

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

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

Вот таблица с типами условий, которые можно использовать:

Тип условия Что проверяет Пример
width Ширину окна браузера @media (width: 768px)
max-width Ширина меньше или равна указанной @media (max-width: 768px)
min-width Ширина больше или равна указанной @media (min-width: 768px)
orientation Ориентация экрана (портретная или альбомная) @media (orientation: landscape)

Обычно используют min-width и max-width. Логика простая: вы задаете минимальную или максимальную границу, и стили применяются к диапазону экранов.

Есть два подхода: mobile-first (сначала стили для мобильных, потом для больших экранов через min-width) и desktop-first (наоборот, через max-width). Какой лучше? Сейчас многие склоняются к mobile-first, потому что это заставляет думать о самом важном содержимом в первую очередь.

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

Давайте сделаем простую карточку товара, которая на телефоне будет одна в ряд, на планшете — две в ряд, а на десктопе — четыре. Вот HTML:

<div class="grid">
  <div class="card">Товар 1</div>
  <div class="card">Товар 2</div>
  <div class="card">Товар 3</div>
  <div class="card">Товар 4</div>
</div>

Теперь CSS. Сначала базовые стили для мобильных (mobile-first):

.grid {
  display: grid;
  grid-template-columns: 1fr; /* Одна колонка на маленьких экранах */
  gap: 16px;
}

.card {
  background: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
}

Затем добавляем медиазапросы для больших экранов:

@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr); /* Две колонки на планшете */
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr); /* Четыре колонки на десктопе */
  }
}

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

Лайфхаки и частые ошибки при работе с медиазапросами

Теперь пара советов, которые сэкономят вам нервы.

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

Частая ошибка — забывать про viewport. Это мета-тег в HTML, который говорит браузеру, как масштабировать страницу на мобильных. Без него медиазапросы могут не работать. Обязательно добавьте в :

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

Еще одна ошибка — использовать слишком много брейкпоинтов (точек, где меняется дизайн). Не нужно писать медиазапрос на каждые 10 пикселей. Достаточно 3-4 основных: для телефона, планшета, небольшого ноутбука и большого монитора.

Вот пример разумных брейкпоинтов:

  • 320–480px — мобильные
  • 481–768px — планшеты
  • 769–1024px — небольшие ноутбуки
  • 1025px и выше — большие экраны

Советы по организации кода для медиазапросов

Когда медиазапросов становится много, код может превратиться в кашу. Вот как этого избежать.

Во-первых, группируйте стили по компонентам, а не по типам запросов. То есть не пишите все медиазапросы в конце файла, а держите их рядом с базовыми стилями элемента, к которому они относятся. Это упрощает поддержку.

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

:root {
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
}

@media (min-width: var(--breakpoint-tablet)) {
  /* стили для планшета */
}

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

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

Что в итоге

Медиазапросы — это не магия, а просто условные правила, которые помогают сайту быть гибким. Главное — понять логику: вы задаете условия, при которых применяются определенные стили. Начните с mobile-first подхода, добавьте мета-тег viewport и не плодите лишние брейкпоинты. Тогда ваш сайт будет радовать пользователей на любом устройстве.

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

Лайфхак: Если вы используете CSS-фреймворк вроде Bootstrap или Tailwind, они уже включают готовые медиазапросы. Но понимать, как они работают, все равно полезно — вдруг придется что-то кастомизировать.
Студия WNDER