Продвинутые медиазапросы

Медиазапросы (media queries) — это основа адаптивного дизайна, и многие разработчики привыкли использовать стандартные breakpoints, такие как 320px, 768px, 1024px и т.д. Но медиазапросы предлагают куда больше возможностей, чем просто изменение макета на нескольких ключевых точках. Давайте рассмотрим, как можно расширить подход к адаптации интерфейсов и использовать медиазапросы на более глубоком уровне.

1. Ориентация устройства

Используя медиазапросы, можно управлять стилями в зависимости от ориентации экрана пользователя: портретной (portrait) или ландшафтной (landscape). Это полезно для интерфейсов, которые требуют разного расположения элементов в зависимости от ориентации устройства.

Пример:

css
Копировать код
@media (orientation: landscape) {
  .container {
    flex-direction: row;
  }
}

2. Медиазапросы на основе соотношения сторон

Иногда важно учитывать не только ширину экрана, но и его соотношение сторон. Например, это актуально для работы с изображениями или видео, где соотношение сторон может сильно влиять на восприятие контента.

Пример:

css
Копировать код
@media (min-aspect-ratio: 16/9) {
  .video {
    width: 100%;
    height: auto;
  }
}

3. Медиазапросы на основе плотности пикселей

Сегодня многие устройства обладают высокоплотными экранами (Retina, 4K и выше). Медиазапросы позволяют адаптировать изображение или контент в зависимости от плотности пикселей экрана с помощью свойства resolution или min-device-pixel-ratio.

Пример:

css
Копировать код
@media (min-resolution: 2dppx) {
  .icon {
    background-image: url('icon@2x.png');
  }
}

4. Медиазапросы на основе светлой и темной тем

Медиазапрос prefers-color-scheme позволяет адаптировать стили под предпочитаемую пользователем цветовую схему — светлую или темную. Это отличный способ улучшить UX, сделав сайт более дружественным для глаз.

Пример:

css
Копировать код
@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: #eee;
  }
}

5. Медиазапросы на основе пользовательских предпочтений

Современные браузеры поддерживают медиазапросы, которые учитывают не только технические характеристики, но и личные предпочтения пользователей, такие как предпочтения по снижению движения (анимаций) или контрастности:

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

Пример:

css
Копировать код
@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

6. Комбинирование медиазапросов

Вы можете комбинировать различные типы медиазапросов для более точного контроля над интерфейсом на разных устройствах. Например, адаптировать дизайн только для устройств с высокой плотностью пикселей в портретной ориентации.

Пример:

css
Копировать код
@media (min-width: 768px) and (orientation: portrait) and (min-resolution: 2dppx) {
  .image {
    width: 100%;
  }
}

Заключение

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