Медиа‑запросы для адаптивного дизайна

Коротко: медиа‑запросы CSS — основной инструмент для адаптивного дизайна. Используйте мета‑вьюпорт, медиа‑запросы с диапазонами, мобильный‑первый подход и тестирование на реальных устройствах. В статье — синтаксис, примеры, готовые сниппеты, чек‑листы и распространённые ошибки.

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

Важно: медиа‑запросы — лишь часть подхода. Комбинируйте их с гибкими сетками, относительными единицами и оптимизированными изображениями.

Что такое адаптивный дизайн

Адаптивный дизайн — это набор приёмов и правил (HTML + CSS), которые заставляют макет «подстраиваться» под разные размеры экрана и возможности устройства. Ключевые элементы:

• Относительные единицы (rem, em, %) вместо фиксированных пикселей
• Метатег viewport для управления масштабом на мобильных устройствах
• Медиа‑запросы для применения разных правил CSS

Краткое определение термина

• Медиа‑запрос: правило CSS, которое применяется только при соблюдении заданных условий (ширина, высота, ориентация и т.д.).

Почему медиа‑запросы важны

• Позволяют переиспользовать стили в разных условиях.
• Уменьшают количество дублирующего CSS при правильной структуре.
• Обязательны для хорошего UX и корректного отображения на мобильных устройствах.

Основы синтаксиса медиа‑запроса

Простой синтаксис:

@media only|not media-type and (expression) {
  /* CSS-код */
}

Компоненты:

• @media — ключевое слово
• only / not — фильтры, редко обязательны
• media-type — screen, print или speech
• expression — условие в скобках, например (max-width: 450px)
• блок CSS в фигурных скобках

Примеры

@media only screen and (max-width: 450px) {
  body {
    background-color: blue;
  }
}

Это правило применится только к экранным устройствам с шириной 450px и меньше.

Если не указывать тип media, правило применяется ко всем трём типам по умолчанию.

/* Дизайн для смартфонов */
@media (max-width: 450px) {
  body {
    background-color: blue;
  }
}

Где размещать медиа‑запросы

Медиа‑запросы — это CSS, поэтому их можно включать только через одну из трёх стратегий добавления CSS:

• Inline (в теге style у элемента) — практично редко
• Internal (внутри