Медиа-запросы

Определение: Медиа-запросы (media queries) — это часть CSS, которая позволяет применять разные стили в зависимости от условий: ширины экрана, ориентации, типа устройства или некоторых пользовательских настроек. Проще говоря, это основной инструмент адаптивной вёрстки: один сайт — разные варианты отображения.

Зачем это нужно

• Делать адаптивный дизайн: менять раскладку и размеры блоков под мобильные и десктоп.
• Управлять типографикой: уменьшать шрифты и межстрочные интервалы на узких экранах.
• Прятать/показывать элементы там, где это оправдано (например, мобильное меню вместо обычного).
• Перестраивать сетку: менять количество колонок в Grid или направление в Flexbox.
• Улучшать удобство: увеличивать кликабельные зоны и отступы на сенсорных устройствах.
• Оптимизировать интерфейс: не перегружать маленькие экраны лишними декоративными блоками.

Пример

Пример кода:

@media (max-width:768px){.grid{grid-template-columns:1fr;}}

Скриншот

Подпись к скриншоту: DevTools “Device Toolbar”: изменение ширины экрана и момент, когда срабатывает медиа-запрос (перестраивается сетка/меню)

Частые ошибки

• Выбирать брейкпоинты “по устройствам” (iPhone/Android), а не по контенту и реальным точкам ломания макета.
• Смешивать разные подходы без системы: часть стилей mobile-first, часть — desktop-first.
• Дублировать много одинакового CSS в разных медиа-запросах вместо того, чтобы вынести общие правила.
• Использовать слишком много брейкпоинтов, превращая поддержку в постоянную “подгонку”.
• Забывать проверять ландшафтную ориентацию и промежуточные ширины (между “мобилкой” и “десктопом”).

Связанные термины

• Адаптивная вёрстка
• CSS
• Flexbox
• CSS Grid
• Брейкпоинт
• Mobile-first
• Viewport

Наши услуги

• Создание корпоративных сайтов — делаем адаптивную вёрстку, чтобы сайт выглядел аккуратно на любых экранах.
• Создание интернет-магазинов — настраиваем сетки каталога и карточек под мобильные, где чаще всего идут покупки.
• Доработка сайтов — исправим “ломающиеся” блоки, добавим нужные брейкпоинты и приведём адаптив к системе.