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

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

Медиазапросы — это специальные правила в CSS, которые позволяют менять стили в зависимости от характеристик устройства. Например, ширины экрана, ориентации (портрет или альбом) или разрешения. Проще говоря, это как переключатель: если экран широкий — показываем три колонки, если узкий — одну.

Без медиазапросов сайт будет выглядеть одинаково на всех устройствах. А это плохо. Пользователи с телефонов просто уйдут к конкурентам. Медиазапросы — основа адаптивного дизайна. Они есть в каждом современном проекте.

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

Как писать медиазапросы: синтаксис и примеры

Синтаксис медиазапроса простой. Вы пишете @media, затем условие в скобках, и внутри — обычные CSS-правила. Вот базовый пример:

/* Базовые стили для мобильных */
body {
  font-size: 16px;
}

/* Для экранов шире 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* Для экранов шире 1024px */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

В этом примере размер шрифта увеличивается с ростом ширины экрана. Условие min-width означает «если ширина больше или равна указанной». Есть и max-width — «если ширина меньше или равна». Комбинируя их, вы можете создавать точные настройки.

Часто используют такие брейкпоинты (точки перелома):

УстройствоШирина экранаТипичный брейкпоинт
Телефон (портрет)до 480px480px
Телефон (альбом)481px — 768px768px
Планшет769px — 1024px1024px
Десктопболее 1024px1200px

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

Давайте сделаем простую сетку из трёх колонок. На телефоне они будут друг под другом, на планшете — две колонки, на десктопе — три. Вот HTML:

<div class="grid">
  <div class="item">Колонка 1</div>
  <div class="item">Колонка 2</div>
  <div class="item">Колонка 3</div>
</div>

А теперь CSS с медиазапросами:

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

.item {
  flex: 1 1 100%; /* На телефоне — 100% ширины */
  background: #e0e0e0;
  padding: 20px;
  text-align: center;
}

@media (min-width: 600px) {
  .item {
    flex: 1 1 calc(50% - 10px); /* На планшете — две колонки */
  }
}

@media (min-width: 900px) {
  .item {
    flex: 1 1 calc(33.33% - 14px); /* На десктопе — три колонки */
  }
}

Обратите внимание: я использовал calc() для учёта отступов. Это удобно. На мобильных колонки занимают всю ширину, на планшете — по две, на десктопе — три.

Лайфхак: Не используйте слишком много брейкпоинтов. Трёх-четырёх обычно хватает. Иначе CSS станет сложным и запутанным. Лучше проектируйте гибкие компоненты, которые подстраиваются сами.

Медиазапросы для ориентации и других характеристик

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

@media (orientation: landscape) {
  /* Стили для альбомной ориентации */
}

@media (orientation: portrait) {
  /* Стили для портретной ориентации */
}

Также можно проверять разрешение экрана (resolution), тип устройства (print для печати) и даже поддерживает ли браузер определённые функции. Например, для ретина-экранов:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Стили для экранов с высокой плотностью пикселей */
}

Это пригодится, если используете изображения с удвоенным разрешением.

Частые ошибки новичков

Вот что обычно идёт не так:

  • Слишком много брейкпоинтов. Не нужно писать медиазапрос для каждого устройства. Используйте несколько ключевых точек.
  • Забывают про max-width. Иногда проще задать стили для больших экранов, а потом сужать. Но лучше начинать с мобильной версии.
  • Игнорируют viewport. Без мета-тега <meta name="viewport" content="width=device-width, initial-scale=1.0"> медиазапросы не сработают корректно на мобильных.
  • Не тестируют на реальных устройствах. Эмулятор в браузере не всегда точен. Открывайте сайт на телефоне.
Правило: Всегда добавляйте <meta name="viewport"> в <head>. Без него адаптивная верстка не будет работать. Это первое, что проверяют.

Что в итоге?

Медиазапросы — это мощный инструмент, который делает сайт удобным для всех. Вы не обязаны помнить все брейкпоинты. Главное — понять принцип: меняйте стили в зависимости от размера экрана. Начинайте с мобильной версии, используйте 3-4 точки перелома, не забывайте про viewport. И тогда ваш сайт будет радовать и владельцев iPhone, и любителей больших мониторов.

Помните: адаптивность — это не роскошь, а необходимость. Пользователи голосуют ногами (или пальцами). Сделайте им удобно.

Студия WNDER