Медиазапросы
Медиазапросы (media queries) - это технология CSS, позволяющая применять разные стили к веб-странице в зависимости от характеристик устройства пользователя (ширина экрана, ориентация, разрешение, тип устройства), что является основой адаптивного веб-дизайна (responsive design).
Технология используется веб-разработчиками и маркетологами для создания адаптивных сайтов, корректно отображающихся на десктопах, планшетах и смартфонах. Например, сайт на десктопе показывает 3 колонки товаров, а на смартфоне - одну колонку с увеличенными карточками. Это достигается медиазапросом @media (max-width: 768px) { ... }.
Медиазапросы были введены в CSS3 в 2009 году и к 2026 году являются обязательным элементом любой современной веб-разработки, обеспечивая соответствие требованиям Mobile-First Indexing Google.
Кратко
[править]Медиазапросы - это инструкции в CSS, которые применяют разные стили в зависимости от характеристик экрана устройства. Они позволяют создавать адаптивные сайты, корректно отображающиеся на любых устройствах - от смартфонов до широких мониторов.
Как работают медиазапросы
[править]Медиазапросы проверяют характеристики устройства и применяют CSS-правила только при выполнении условий.
Синтаксис:
@media (условие) {
/* стили, применяемые при выполнении условия */
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Основные условия (медиа-функции):
| Функция | Описание |
|---|---|
| width / max-width / min-width | Ширина области просмотра (viewport) |
| height | Высота области просмотра |
| orientation | Ориентация: portrait (вертикальная) / landscape (горизонтальная) |
| resolution | Плотность пикселей (для Retina-экранов) |
| hover | Поддерживает ли устройство наведение мыши |
| prefers-color-scheme | Светлая или тёмная тема (для dark mode) |
Примеры использования
[править]/* Десктоп: 3 колонки */
.products {
display: flex;
gap: 20px;
}
/* Планшет: 2 колонки */
@media (max-width: 1024px) {
.products {
flex-wrap: wrap;
}
.product-card {
width: calc(50% - 10px);
}
}
/* Смартфон: одна колонка */
@media (max-width: 768px) {
.product-card {
width: 100%;
}
}
/* Тёмная тема для пользователей, включивших dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #fff;
}
}
Mobile-first подход
[править]В mobile-first подходе стили сначала пишутся для мобильных устройств (минимальная база), а затем добавляются правила для больших экранов через min-width.
/* Базовые стили для мобильных */
.container {
padding: 16px;
}
/* Десктоп: более широкие отступы */
@media (min-width: 1024px) {
.container {
padding: 32px;
}
}
Связь с интернет-маркетингом
[править]Медиазапросы напрямую влияют на бизнес-показатели:
| Аспект | Влияние |
|---|---|
| Мобильный трафик | Более 60 процентов трафика приходится на мобильные устройства. Без адаптивности пользователь уходит |
| Core Web Vitals | Адаптивная вёрстка влияет на CLS (Cumulative Layout Shift) - смещение элементов при загрузке |
| SEO | Google использует Mobile-First Indexing - сначала оценивает мобильную версию сайта |
| Конверсия | Неадаптивный сайт на мобильном теряет до 50 процентов потенциальных клиентов |
Сравнение подходов к адаптивности
[править]| Подход | Описание | Когда использовать |
|---|---|---|
| Desktop-first | Стили для десктопа, затем через max-width - для меньших экранов | При редизайне старых десктопных сайтов |
| Mobile-first | Стили для мобильных, затем через min-width - для больших экранов | Современный стандарт для новых проектов |
| Responsive + отдельная мобильная версия | 1 сайт, но разная вёрстка через медиазапросы | Оптимальный подход в 2026 году |
Часто задаваемые вопросы
[править]Как медиазапросы влияют на SEO?
[править]Google оценивает мобильную версию сайта в первую очередь (Mobile-First Indexing). Если сайт не адаптирован через медиазапросы, он может потерять позиции в выдаче, особенно на мобильных устройствах.
Что такое prefers-color-scheme?
[править]Медиафункция, которая определяет, включена ли на устройстве пользователя тёмная тема. Позволяет автоматически переключать сайт в тёмную тему, если пользователь предпочёл её в настройках операционной системы.
Как проверить, правильно ли настроены медиазапросы?
[править]Необходимо открыть сайт в Chrome DevTools, нажать иконку мобильного устройства (Toggle device toolbar) и проверить отображение на разных разрешениях - от 320px (мобильный) до 1920px (десктоп).
В чём разница между min-width и max-width?
[править]min-width применяет стили для экранов шириной больше или равной указанному значению (используется в mobile-first подходе). max-width применяет стили для экранов шириной меньше или равной указанному значению (используется в desktop-first подходе).
Какие ещё медиа-функции полезны для маркетинга?
[править]prefers-reduced-motion - отключает анимации для пользователей с чувствительностью к движению. any-hover - определяет, поддерживает ли устройство наведение мыши. pointer - определяет точность управления (touch, mouse, fine).
