Как сделать сайт, который подстраивается под любой экран: простое руководство по медиазапросам

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

Digital-студия WNDER

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

Медиазапросы — это специальные правила в CSS, которые позволяют применять стили только при определённых условиях. Например, вы можете сказать: «Если ширина экрана меньше 600 пикселей, то сделай шрифт меньше, а кнопки — на всю ширину». Это как переключение режимов: сайт понимает, на каком устройстве его смотрят, и подстраивается.

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

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

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

Всё начинается с правила @media в CSS. Вы задаёте условие, и если оно выполняется, стили внутри применяются. Вот простой пример:

/* Обычные стили для всех экранов */
body {
  font-size: 16px;
}

/* Если ширина экрана меньше 600px */
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Здесь max-width: 600px означает «при ширине до 600 пикселей включительно». Если экран уже, шрифт станет 14px. Если шире — останется 16px. Это называется «мобильный подход»: сначала пишете стили для больших экранов, потом сужаете.

Можно использовать и наоборот — min-width, когда базовые стили для мобильных, а для больших экранов добавляете улучшения. Это называется «десктопный подход». Какой выбрать? Зависит от проекта, но чаще используют мобильный, потому что сейчас большинство трафика — с телефонов.

Важно: медиазапросы не ускоряют сайт и не делают его «умным» автоматически. Они просто меняют стили. Вся логика остаётся на вас.

Основные параметры: ширина, разрешение, ориентация

Чаще всего используют ширину экрана, но есть и другие полезные параметры. Вот таблица самых популярных:

Также можно комбинировать условия с помощью and. Например: @media (min-width: 600px) and (max-width: 1024px) — стили применятся только для экранов средней ширины.

Не переусердствуйте с количеством запросов. Обычно достаточно 2–3 точек перелома: для телефона, планшета и десктопа. Слишком много — запутаетесь сами и запутаете браузер.

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

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

<div class="card">
  <img src="product.jpg" alt="Товар" class="card__image">
  <div class="card__content">
    <h2 class="card__title">Крутой товар</h2>
    <p class="card__price">1999 ₽</p>
    <button class="card__button">Купить</button>
  </div>
</div>

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

/* Базовые стили для мобильных */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  max-width: 300px;
}

.card__image {
  width: 100%;
  border-radius: 4px;
}

.card__content {
  margin-top: 12px;
}

.card__button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

/* Для экранов шире 600px — горизонтальная карточка */
@media (min-width: 600px) {
  .card {
    flex-direction: row;
    max-width: 600px;
  }
  .card__content {
    margin-left: 16px;
    margin-top: 0;
  }
}

Видите? На мобильном карточка складывается в столбик, на десктопе — в ряд. Всё просто.

Если нужно больше точек перелома, добавьте ещё запросы. Например, для планшета можно сделать двухколоночную сетку, а для телефона — одноколоночную.

Типичные ошибки и как их избежать

Новички часто наступают на одни и те же грабли. Вот основные:

• Забывают про viewport. Без этого мета-тега медиазапросы не работают на мобильных. Обязательно добавьте в <head>: <meta name="viewport" content="width=device-width, initial-scale=1">.
• Используют слишком много брейкпоинтов. Каждый лишний запрос усложняет поддержку. Старайтесь ограничиться 2–3 точками.
• Игнорируют ретину. На экранах с высокой плотностью пикселей изображения размываются. Используйте resolution или подгружайте картинки в 2x размере.
• Проверяют только в инструментах разработчика. Реальные устройства отличаются от эмуляторов. Тестируйте на живых телефонах.

Ещё одна ошибка — применять медиазапросы только к одному элементу. Адаптивность должна быть глобальной: меняется сетка, шрифты, отступы, скрываются ненужные блоки.

Что в итоге: резюме

Медиазапросы — это не магия, а просто инструмент. Вы задаёте условия, браузер их выполняет. Главное — помнить о трёх вещах:

• Всегда добавляйте viewport в HTML.
• Не плодите лишние брейкпоинты — используйте 2–3 ключевые точки.
• Тестируйте на реальных устройствах, а не только в браузере.

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

Студия WNDER