Какие параметры передаются в @media кроме min-width и max-width?

Отличный вопрос! Он позволяет оценить, насколько глубоко разработчик понимает адаптивную верстку и возможности современных медиа-запросов. Помимо всем известных min-width и max-width, существует множество других мощных параметров (их называют медиа-функциями), которые можно разделить на несколько категорий.

1. Типы устройств и общие параметры

Эти параметры задают общую категорию устройства.

• all (по умолчанию): Подходит для всех типов устройств.
• screen: Для экранов компьютеров, планшетов, смартфонов.
• print: Стили, применяемые при печати страницы. Позволяют скрыть навигацию, изменить цвета на черно-белые, убрать фоны.

  @media print {
    .sidebar, .ad-banner { display: none; }
    body { color: black; background: white; }
  }
  

• speech: Для синтезаторов речи (скринридеров).

2. Характеристики устройства (Device Features)

Самые часто используемые после размеров окна.

• Соотношение сторон и ориентация:

    *   **`orientation`**: `portrait` (портретная, высота > ширины) или `landscape` (альбомная).
    *   **`aspect-ratio`**, **`min-aspect-ratio`**, **`max-aspect-ratio`**: Соотношение ширины к высоте (например, `16/9`). Незаменимы для адаптации под специфичные экраны.

```css
/* Для очень высоких экранов */
@media (min-aspect-ratio: 11/5) {
  .header { position: fixed; }
}
```

• Разрешение и плотность пикселей:

    *   **`resolution`**, **`min-resolution`**, **`max-resolution`**: Позволяют обслуживать изображения с разным `dpi` (точками на дюйм). Ключевое для **ретинизации** (Retina-дисплеи).

```css
/* Для экранов с высокой плотностью пикселей */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}
```

    *   **`device-pixel-ratio`** (устаревший, но все еще используется): Его аналог — `resolution: 2dppx`.

3. Характеристики отображения (Display Features)

• Цвет: Позволяют адаптировать интерфейс под различные цветовые возможности экрана.

    *   **`color`**, **`min-color`**, **`max-color`**: Количество бит на цветовой канал.
    *   **`color-gamut`**: Цветовое пространство устройства (`srgb`, `p3`, `rec2020`). Полезно для широкодиапазонных цветов.
    *   **`prefers-color-scheme`**: Один из важнейших параметров современного веба. Определяет тему, выбранную в ОС: `light` (светлая) или `dark` (темная).

```css
@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #eee; }
}
```

    *   **`prefers-contrast`**: Учитывает настройки пользователя на высокую контрастность (`high`, `forced`).
    *   **`inverted-colors`**: `inverted` или `none` (инвертированы ли цвета системой).

4. Параметры взаимодействия (Interaction Features)

Критически важны для доступности (a11y) и UX.

• Указательные устройства и hover:

    *   **`pointer`**: Качество основного указывающего устройства. Значения: `none`, `coarse` (палец, грубый указатель), `fine` (мышь, стилус).
    *   **`hover`**: Поддерживает ли устройство состояние наведения. Значения: `none` или `hover`.

```css
/* Увеличиваем размер кликабельных зон для сенсорных устройств */
@media (pointer: coarse) {
  button, .nav-link { min-height: 44px; min-width: 44px; }
}

/* Показываем подсказки только если есть поддержка hover */
@media (hover: hover) {
  .tooltip-trigger:hover .tooltip { display: block; }
}
```

• Кинетическая прокрутка:

    *   **`overflow-block`**, **`overflow-inline`**: Определяет, как устройство обрабатывает переполнение контента.

5. Особые пользовательские предпочтения (User Preferences)

Прямая настройка под нужды пользователя.

• prefers-reduced-motion: Фундаментальный для доступности параметр. Позволяет отключить или упростить анимации для пользователей с вестибулярными расстройствами.

  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  

• prefers-reduced-data: Пользователь хочет экономить трафик (reduce). Можно отключать тяжелые фоны и шрифты.

6. Устаревшие параметры (избегать)

• device-width, device-height, device-aspect-ratio: Эти параметры относятся к физическому размеру экрана устройства, а не окна браузера. Их использование считается плохой практикой, так как они не реагируют на изменение размера окна на десктопе и могут давать некорректные результаты на устройствах с разным scaling.

Практическое применение: комбинирование

Сила медиа-запросов раскрывается в комбинации параметров с помощью логических операторов and, , (запятая, логическое ИЛИ), not и only.

/* Сложный запрос: для экранов в альбомной ориентации,
   с поддержкой темной темы И с грубым указателем */
@media screen and (orientation: landscape) and
       (prefers-color-scheme: dark) and
       (pointer: coarse) {
  .map-controls { background: rgba(255,255,255,0.1); }
}

/* ИЛИ-условие: применяем либо при малой ширине, либо при темной теме */
@media (max-width: 768px), (prefers-color-scheme: dark) {
  .sidebar { border-color: #555; }
}

Итог: Современные медиа-запросы — это мощный инструмент, выходящий далеко за рамки простой адаптации по ширине. Они позволяют создавать инклюзивные, доступные и контекстно-зависимые интерфейсы, которые учитывают не только размер экрана, но и тип взаимодействия, пользовательские настройки в ОС, технические возможности устройства и даже экологические предпочтения (как в случае с prefers-reduced-data).