Что такое медиа-запрос?

Что такое медиа-запрос?

Медиа-запрос (Media Query) — это ключевая технология в CSS (Cascading Style Sheets), которая позволяет применять стили к веб-странице условно, основываясь на характеристиках устройства или среды отображения. Это фундаментальный инструмент для создания адаптивного веб-дизайна (Responsive Web Design), который обеспечивает корректное и удобное представление сайта на различных устройствах: от широкоформатных мониторов до маленьких смартфонов.

Как работает медиа-запрос?

Медиа-запрос состоит из двух основных частей:

• Тип медиа (Media Type): Определяет категорию устройства. Самые распространенные типы — screen (для экранов), print (для печати), all (для всех устройств). В современной практике почти всегда используется screen или all.
• Выражение с условием (Media Feature): Это логическое выражение, которое проверяет конкретные характеристики устройства или среды. Условие возвращает true или false. Если оно true, то CSS-правила внутри медиа-запроса применяются.

Синтаксис медиа-запроса

Медиа-запросы можно писать в CSS несколькими способами:

1. Внутри CSS-файла с помощью правила @media:

/* Базовые стили для всех устройств */
.container {
    width: 100%;
    padding: 10px;
}

/* Стили применяются ТОЛЬКО при ширине экрана от 768px до 1200px */
@media screen and (min-width: 768px) and (max-width: 1200px) {
    .container {
        width: 80%;
        margin: 0 auto; /* Центрирование контейнера */
    }
    .sidebar {
        display: none; /* Скрываем боковую панель на планшетах */
    }
}

/* Стили применяются ТОЛЬКО при ширине экрана больше 1200px */
@media screen and (min-width: 1200px) {
    .container {
        width: 70%;
        max-width: 1440px;
    }
    .grid {
        display: grid;
        grid-template-columns: 1fr 2fr; /* Создаем колонки для широких экранов */
    }
}

2. В HTML, при подключении CSS-файлов через <link>:

<!-- Этот файл будет загружен и применен только на экранах шириной менее 600px -->
<link rel="stylesheet" media="screen and (max-width: 599px)" href="mobile.css">

<!-- Этот файл будет загружен и применен только на экранах шириной от 600px до 1024px -->
<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 1024px)" href="tablet.css">

<!-- Основный стили для всех устройств -->
<link rel="stylesheet" href="main.css">

Этот метод менее популярен, так как приводит к увеличению количества HTTP-запросов.

Ключевые характеристики (Media Features)

Медиа-запросы позволяют проверять множество параметров. Самые важные и часто используемые:

• width / min-width / max-width: Ширина области просмотра (viewport). Это самые распространенные условия для создания «брекпоинтов» (breakpoints) в адаптивном дизайне.
• height / min-height / max-height: Высота области просмотра.
• orientation: Ориентация устройства (portrait — вертикальная, landscape — горизонтальная).
• resolution: Плотность пикселей устройства (например, min-resolution: 2dppx для ретина-дисплеев).
• aspect-ratio: Соотношение ширины и высоты области просмотра (например, aspect-ratio: 16/9).

Пример практического использования (Брекпоинты)

В современном адаптивном дизайне принято использовать подход Mobile First. Стили сначала пишутся для мобильных устройств, а затем, через медиа-запросы с min-width, дополняются для более широких экранов.

/* Mobile First стили (применяются ко всем устройствам) */
body {
    font-size: 14px;
    line-height: 1.4;
}
.header {
    flex-direction: column;
}

/* Брекпоинт для планшетов (ширина >= 768px) */
@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
    }
    .header {
        flex-direction: row; /* Переключаем шапку на горизонтальное расположение */
        justify-content: space-between;
    }
    .main-content {
        display: flex;
        gap: 20px;
    }
}

/* Брекпоинт для десктопов (ширина >= 1024px) */
@media screen and (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .grid-system {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

Важные аспекты для разработчика

• Логические операторы: Можно использовать and для объединения условий, not для отрицания, only (часто используется для старых браузеров), а также запятые для логического или (как в примере ниже).

  @media (max-width: 600px), (orientation: portrait) {
      /* Стили применяются, если ширина <= 600px ИЛИ ориентация портретная */
  }
  

• Динамические значения: С появлением CSS Custom Properties (CSS Variables) и вычисляемых значений (calc()), медиа-запросы стали еще более мощными. Можно, например, динамически менять количество колонок в гриде.
• Не только для ширины: Медиа-запросы полезны не только для адаптивности. Например, правило @media print позволяет создавать оптимизированные стили для печати документа (убирать фон, менять цвета на черно-белые, скрывать ненужные элементы).

В заключение, медиа-запросы — это не просто технический прием, а философия разработки, которая ставит пользователя и его контекст использования (устройство, размер экрана, ориентация) в центр внимания. Грамотное использование медиа-запросов в сочетании с Flexbox, Grid Layout и релятивными единицами измерения (%, em, rem, vw, vh) является основой профессионального фронтенд-разработки и создания интерфейсов, которые одинаково хорошо работают в любой ситуации.