Что такое MediaQuery?

Что такое MediaQuery?

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

Основное назначение и принцип работы

Media Query является частью спецификации CSS3 и расширяет возможности правила @media, которое существовало и ранее (например, для разделения стилей для экрана и печати). Его главная задача — создание интерфейсов, которые автоматически адаптируются под различные устройства: от смартфонов и планшетов до десктопов и телевизоров.

Базовый синтаксис выглядит так:

@media (условие) {
  /* CSS-правила, применяемые при выполнении условия */
}

Условие может включать различные медиа-типы (screen, print, speech) и медиа-функции (например, max-width, orientation).

Ключевые компоненты Media Query

1. Медиа-тип (Media Type) — определяет категорию устройства.

    *   `screen` — для экранов (основной тип для веба).
    *   `print` — для печати (позволяет оптимизировать стили документа при выводе на принтер).
    *   `speech` — для скрин-ридеров.
    *   `all` — для всех устройств (используется по умолчанию).

1. Медиа-функции (Media Features) — описывают конкретные характеристики устройства или среды. Это основа для создания условий.

    *   `width`, `min-width`, `max-width` — ширина области просмотра (viewport). Наиболее часто используемые.
    *   `height`, `min-height`, `max-height` — высота области просмотра.
    *   `orientation` — ориентация (`portrait` — портретная, `landscape` — альбомная).
    *   `resolution` — плотность пикселей (полезно для ретини-дисплеев).
    *   `hover` — проверяет, поддерживает ли устройство ховер (например, отличаем тач-устройства от десктопов).
    *   `prefers-color-scheme` — определяет предпочтительную цветовую тему пользователя (`light` или `dark`).

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

Пример 1: Адаптация макета по ширине (Mobile First подход)

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

/* Планшеты (ширина от 768px) */
@media (min-width: 768px) {
  .container {
    padding: 20px;
    max-width: 720px;
  }
}

/* Десктопы (ширина от 1024px) */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
    display: flex;
  }
}

Пример 2: Специфичные стили для печати

@media print {
  .navigation, .ad-banner {
    display: none; /* Скрываем ненужные элементы */
  }
  body {
    font-size: 12pt;
    color: black;
  }
  a::after {
    content: " (" attr(href) ")"; /* Добавляем URL ссылок */
  }
}

Пример 3: Поддержка тёмной темы

:root {
  --bg-color: white;
  --text-color: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

Важные особенности и лучшие практики

• Mobile First vs Desktop First: Стратегия Mobile First предполагает написание базовых стилей для мобильных устройств, а затем использование min-width для добавления стилей для более широких экранов. Это считается современным и более производительным подходом.
• Логические операторы: Media Query поддерживают and, not, only и запятые (работающие как логическое или).

  /* Стили для планшетов в альбомной ориентации */
  @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* ... */
  }
  /* Стили для печати ИЛИ для очень узких экранов */
  @media print, (max-width: 480px) {
    /* ... */
  }
  

• Использование в HTML: Media Query можно указывать непосредственно при подключении CSS-файла, что позволяет браузеру загружать только необходимые ресурсы.

  <link rel="stylesheet" media="(max-width: 768px)" href="mobile.css">
  

• Точки останова (Breakpoints): Хотя распространена практика использования фиксированных значений (320px, 768px, 1024px и т.д.), современный подход рекомендует определять breakpoints на основе контента, то есть в тот момент, когда макет «ломается», а не под конкретные устройства.

Заключение

Media Query — это фундаментальный и мощный инструмент фронтенд-разработчика для создания по-настоящему адаптивных, доступных и пользовательских интерфейсов. Понимание их работы позволяет не просто «подгонять» сайт под разные экраны, а проектировать целостный опыт взаимодействия, учитывающий возможности устройства, контекст использования и даже предпочтения пользователя (как в случае с тёмной темой). В сочетании с современными CSS-технологиями, такими как CSS Grid, Flexbox и контейнерные запросы, Media Query остаются краеугольным камнем адаптивного веба.