Как работают медиа-запросы в веб-разработке для адаптивной верстки, включая мобильные устройства?

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

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

@media <тип_медиа> and (<выражение>) {
  /* CSS-правила */
}

• <тип_медиа> определяет, к какому типу устройства применяется запрос (например, screen, print, all).
• <выражение> задает условия, при которых применяются стили (например, ширина, высота, ориентация экрана, разрешение).

Популярные выражения для адаптивной верстки:

• min-width: Стили применяются, если ширина области просмотра равна или больше указанного значения.
• max-width: Стили применяются, если ширина области просмотра равна или меньше указанного значения.
• orientation: Стили применяются в зависимости от ориентации экрана (portrait или landscape).
• resolution: Стили применяются в зависимости от разрешения экрана.

Пример использования max-width для стилизации на мобильных устройствах:

/* Стили по умолчанию */
body {
  font-size: 16px;
}

/* Стили для экранов шириной до 768px (типично для мобильных) */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    padding: 10px;
  }
}

Пример использования min-width для стилизации на десктопах (подход "mobile first"):

/* Стили для мобильных по умолчанию */
.column {
  width: 100%;
}

/* Стили для экранов шириной от 992px (типично для десктопов) */
@media screen and (min-width: 992px) {
  .column {
    width: 50%;
    float: left;
  }
}

Комбинация выражений с операторами and, or (or в медиа-запросах записывается через запятую) и not:

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

@media screen and (orientation: landscape), print {
  /* Стили для альбомной ориентации экрана и для печати */
}

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

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

• width=device-width устанавливает ширину области просмотра равной ширине устройства.
• initial-scale=1.0 устанавливает начальный коэффициент масштабирования.

Без этого мета-тега многие мобильные браузеры масштабируют страницу по умолчанию, игнорируя реальную ширину устройства, что нарушает адаптивность.