Медиазапрос (Media Query)

Что такое CSS медиазапрос?

Медиазапрос (media query) — CSS-техника, которая применяет стили условно, в зависимости от характеристик устройства или области просмотра (viewport). Чаще всего используется ширина экрана. Медиазапросы — основной инструмент адаптивного веб-дизайна (responsive design), позволяющий одной HTML-странице менять макет под телефоны, планшеты и десктопы.

Базовый синтаксис

/* Применяется, когда ширина viewport не больше 768px */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { width: 100%; }
}

/* Применяется только на широких экранах */
@media (min-width: 1200px) {
  .hero { font-size: 48px; }
}

Популярные медиафункции

• width / max-width / min-width — ширина viewport
• height — высота viewport
• orientation — портретная или альбомная ориентация
• resolution — плотность пикселей (полезно для Retina-дисплеев)
• prefers-color-scheme — предпочтение тёмной или светлой темы

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

Google использует mobile-first indexing — сканирует и ранжирует мобильную версию страниц. Сайт без правильных адаптивных стилей (через медиазапросы) будет показывать плохие результаты в мобильных Core Web Vitals, особенно по Cumulative Layout Shift (CLS) и Largest Contentful Paint (LCP). Плохой мобильный UX — прямой сигнал ранжирования.

Используйте Page Analyzer, чтобы проверить отображение страниц на мобильной ширине viewport и выявить CSS-проблемы, влияющие на мобильный usability.