Media Queries (Медиа-запросы)

Скачать PDF

Введение

Медиа-запросы (Media Queries) - это мощный инструмент CSS, который позволяет применять различные стили в зависимости от характеристик устройства или условий просмотра. Они являются ключевым компонентом адаптивного веб-дизайна.

Синтаксис

Основной синтаксис медиа-запроса:

@media медиа-тип and (условие) {
  /* CSS правила */
}

Медиа-типы

• all - все типы устройств (значение по умолчанию)
• print - принтеры и режим предварительного просмотра печати
• screen - экраны компьютеров, планшетов, смартфонов и т.д.
• speech - программы чтения с экрана

@media print {
  .no-print {
    display: none;
  }
}

Медиа-функции (условия)

Размеры экрана

• width, min-width, max-width - ширина области просмотра
• height, min-height, max-height - высота области просмотра

/* Стили для экранов шириной не менее 768px */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Стили для экранов шириной не более 767px */
@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

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

• orientation: portrait - высота больше или равна ширине
• orientation: landscape - ширина больше высоты

@media (orientation: landscape) {
  .sidebar {
    float: left;
    width: 30%;
  }
  
  .content {
    float: right;
    width: 70%;
  }
}

Соотношение сторон

• aspect-ratio, min-aspect-ratio, max-aspect-ratio - соотношение ширины и высоты области просмотра

/* Для широких экранов */
@media (min-aspect-ratio: 16/9) {
  .video-container {
    height: 56.25vw; /* 9/16 = 0.5625 */
  }
}

Плотность пикселей

• resolution, min-resolution, max-resolution - плотность пикселей устройства

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

Другие медиа-функции

• hover - поддерживает ли устройство наведение
• pointer - тип указательного устройства (none, coarse, fine)
• prefers-reduced-motion - предпочтение пользователя по уменьшению движения
• prefers-color-scheme - предпочтение пользователя по цветовой схеме (light, dark)

/* Стили для устройств, которые поддерживают наведение */
@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
  }
}

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

Логические операторы

and

Объединяет несколько условий, все должны быть истинными.

@media (min-width: 768px) and (max-width: 1023px) {
  /* Стили для планшетов */
}

not

Инвертирует результат медиа-запроса.

@media not screen and (max-width: 767px) {
  /* Стили для всех устройств, кроме мобильных экранов */
}

only

Предотвращает применение стилей в старых браузерах, которые не поддерживают медиа-запросы.

@media only screen and (min-width: 768px) {
  /* Стили для современных браузеров с шириной экрана не менее 768px */
}

, (запятая)

Работает как логическое ИЛИ, применяет стили, если хотя бы одно условие истинно.

@media (max-width: 767px), (orientation: portrait) {
  /* Стили для мобильных устройств ИЛИ для устройств в портретной ориентации */
}

Стандартные брейкпоинты

Распространенные точки перелома (breakpoints) для адаптивного дизайна:

/* Мобильные устройства */
@media (max-width: 767px) { ... }

/* Планшеты */
@media (min-width: 768px) and (max-width: 1023px) { ... }

/* Десктопы */
@media (min-width: 1024px) and (max-width: 1279px) { ... }

/* Большие экраны */
@media (min-width: 1280px) { ... }

Практические советы

1. Используйте em или rem вместо px для брейкпоинтов, чтобы учитывать масштабирование текста пользователем.

@media (min-width: 48em) { /* 768px при размере шрифта 16px */ }

2. Организуйте медиа-запросы одним из способов:

   • В конце CSS-файла (Mobile First)
   • Рядом с соответствующими селекторами (компонентный подход)
   • В отдельных файлах для каждого брейкпоинта

3. Используйте переменные CSS для брейкпоинтов:

:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

@media (min-width: var(--breakpoint-md)) {
  /* Стили */
}

4. Тестируйте на реальных устройствах, а не только в эмуляторах браузера.

5. Не забывайте о мета-теге viewport для корректного отображения на мобильных устройствах:

<meta name="viewport" content="width=device-width, initial-scale=1.0">