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

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

Медиазапросы — это как условные операторы в CSS. Они проверяют характеристики устройства: ширину экрана, ориентацию, разрешение. Если условие выполняется — применяются стили. Если нет — стили игнорируются. Это основа адаптивного дизайна.

Допустим, у тебя есть блок с текстом. На десктопе он занимает 50% ширины, а на мобилке — 100%. Без медиазапросов пришлось бы писать два отдельных CSS-файла. С ними — одна строка кода. Экономия времени и нервов.

Основные параметры, которые можно проверять:

  • width — ширина окна браузера
  • height — высота окна
  • orientation — портретная или альбомная ориентация
  • resolution — плотность пикселей (для ретины)
  • hover — поддерживает ли устройство наведение мыши

Пример простого медиазапроса:

@media (max-width: 768px) {
  .block {
    width: 100%;
  }
}

Здесь мы говорим: если ширина экрана меньше или равна 768 пикселям, то блок становится на всю ширину. Всё гениальное просто.

Практические примеры: от мобилки до десктопа

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

<div class="container">
  <div class="card">Товар 1</div>
  <div class="card">Товар 2</div>
  <div class="card">Товар 3</div>
  <div class="card">Товар 4</div>
  <div class="card">Товар 5</div>
  <div class="card">Товар 6</div>
</div>
.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 33.33%;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  .card {
    width: 50%;
  }
}

@media (max-width: 576px) {
  .card {
    width: 100%;
  }
}

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

Таблица типичных брейкпоинтов

Чтобы не гадать, какие значения ставить, используй проверенные точки перелома. Вот таблица для ориентира:

УстройствоШирина (px)Описание
Телефондо 576Одна колонка, крупные элементы
Планшет577 — 992Две колонки, средние элементы
Десктоп993 — 1200Три-четыре колонки
Большой экранбольше 1200Много колонок, широкие блоки

Но не копируй слепо. Лучше ориентироваться на контент. Если твой текст ломается при 800px — ставь брейкпоинт на 800px. Универсальных цифр нет, есть здравый смысл.

Лайфхак: mobile-first подход

Правило: Начинай с мобильной версии. Сначала пиши стили для маленьких экранов, а потом через min-width добавляй для больших. Так меньше кода и меньше ошибок.

Пример mobile-first:

.card {
  width: 100%; /* по умолчанию для телефона */
}

@media (min-width: 577px) {
  .card {
    width: 50%;
  }
}

@media (min-width: 993px) {
  .card {
    width: 33.33%;
  }
}

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

Типичные ошибки новичков

Ошибка первая: забыть про viewport meta-тег. Без него медиазапросы не работают на мобилках. Вставь в head:

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

Ошибка вторая: использовать px для шрифтов. Лучше em или rem, чтобы текст масштабировался вместе с экраном.

Ошибка третья: игнорировать ориентацию. На планшете в альбомном режиме может быть достаточно места для трёх колонок, а в портретном — только для двух. Учти это:

@media (orientation: landscape) {
  .card {
    width: 33.33%;
  }
}

@media (orientation: portrait) {
  .card {
    width: 50%;
  }
}

И ещё: не злоупотребляй медиазапросами. Если можно обойтись flexbox или grid — делай так. Медиазапросы должны быть последним средством, а не первым.

Заключение

CSS медиазапросы — это твой швейцарский нож для адаптивного дизайна. Они позволяют сайту выглядеть достойно на любом устройстве, от часов до телевизора. Главное — не переусердствовать и помнить про mobile-first. Начни с малого: добавь пару брейкпоинтов и посмотри, как изменится интерфейс. В итоге ты получишь отзывчивый сайт, который радует пользователей.

Студия WNDER