Какие знаешь свойства у @midea в CSS?

@media в CSS: свойства и особенности

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

Основные свойства (медиа-функции) в @media

Медиа-запросы состоят из медиа-типа (например, screen, print) и медиа-функций (условий). Вот ключевые медиа-функции, которые можно использовать внутри @media:

1. width и height

Определяют ширину и высоту области просмотра (viewport).

@media (min-width: 768px) {
  /* Стили для устройств с шириной viewport от 768px и больше */
  .container { width: 750px; }
}

@media (max-height: 600px) {
  /* Стили для устройств с высотой viewport до 600px */
  header { height: 50px; }
}

2. min-width, max-width, min-height, max-height

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

@media (min-width: 320px) and (max-width: 480px) {
  /* Стили для мобильных устройств (например, смартфонов) */
  body { font-size: 14px; }
}

3. orientation

Определяет ориентацию устройства: portrait (вертикальная) или landscape (горизонтальная).

@media (orientation: landscape) {
  /* Стили для горизонтального режима */
  .sidebar { width: 30%; }
}

4. resolution

Определяет плотность пикселей устройства (например, 2dppx для дисплеев с высокой плотностью).

@media (min-resolution: 2dppx) {
  /* Стили для Retina-дисплеев и других высокоплотных экранов */
  .logo { background-image: url('logo@2x.png'); }
}

5. aspect-ratio

Определяет соотношение ширины и высоты viewport (например, 16/9).

@media (aspect-ratio: 16/9) {
  /* Стили для экранов с соотношением 16:9 */
  .video-wrapper { padding-top: 56.25%; }
}

6. color, color-index, monochrome

Связаны с цветовыми характеристиками устройства.

@media (color) {
  /* Стили для цветных устройств */
}

@media (monochrome) {
  /* Стили для монохромных устройств */
}

7. hover и pointer

Позволяют определить, поддерживает устройство hover (наведение) и тип указателя (например, fine для мыши, coarse для касания).

@media (hover: hover) {
  /* Устройство поддерживает hover (например, компьютер с мышью) */
  button:hover { background-color: #007bff; }
}

@media (pointer: coarse) {
  /* Основной указатель — грубый (например, касание на телефоне) */
  input { padding: 15px; } /* Увеличиваем область для удобного касания */
}

8. prefers-color-scheme

Определяет предпочтение пользователя по теме: light (светлая) или dark (темная). Ключевое для поддержки темного режима.

@media (prefers-color-scheme: dark) {
  /* Стили для темного режима */
  body { background-color: #121212; color: #ffffff; }
}

9. prefers-reduced-motion

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

@media (prefers-reduced-motion: reduce) {
  /* Уменьшаем или удаляем анимации */
  * { animation-duration: 0s !important; }
}

10. scripting

Определяет поддержку скриптов (например, JavaScript) на устройстве.

@media (scripting: none) {
  /* Стили для устройств без поддержки скриптов */
  .no-script-message { display: block; }
}

Пример комплексного медиа-запроса

@media screen and (min-width: 1024px) and (hover: hover) and (prefers-color-scheme: light) {
  /* 
    Стили применяются только:
    - Для экранов (screen)
    - С шириной от 1024px
    - С поддержкой hover (например, компьютеры)
    - При выбранной светлой теме
  */
  .navigation-menu li { display: inline-block; }
  .card { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
}

Практические рекомендации

• Логический порядок: При использовании нескольких условий, объединяйте их с and. Для альтернативных условий используйте запятые (,), что аналогично логическому "или".
• Mobile-first: Часто рекомендуется начинать с стилей для мобильных устройств (без медиа-запросов или с min-width), затем добавлять медиа-запросы для более широких экранов.
• Специфичность: Стили внутри медиа-запросов применяются с учетом обычной специфичности CSS. Будьте внимательны к порядку объявлений.

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