Часто причина в простой оплошности — но бывает много вариантов. Пройдёмся по основным проверкам и типичным ошибкам, чтобы быстро найти проблему.
1) Закройте скобки и проверьте синтаксис
- У вас в примере только открывающая строка. Убедитесь, что у вас есть и закрывающая фигурная скобка:
@media (max-width: 1919px) {
/* правила */
}
- Одна незакрытая скобка или синтаксическая ошибка выше по файлу может «сломать» все последующие правила.
2) Правильный смысл max-width/min-width и число
- max-width: 1919px означает «применять, когда ширина окна <= 1919px». На экране 1920px правило не сработает.
- Может вам нужен min-width вместо max-width (или другой брейкпоинт). Проверьте, какие размеры вы ожидаете тестировать.
3) Порядок и специфичность CSS
- Медиазаказы работают как обычные правила: если после медиазаключения подключён другой файл/правило с большей специфичностью или просто позже в коде — оно его переопределит.
- Поместите медиа-правила после базового CSS, или увеличьте специфичность/используйте !important только для отладки.
4) Мета-тег viewport (для мобильных)
- При тестировании на мобильных устройствах обязательно:
<meta name="viewport" content="width=device-width, initial-scale=1">
Без него на телефоне ширина страницы может оставаться широкой, и ваши медиазапросы не сработают так, как ожидаете.
5) Проверка в DevTools
- Откройте инструменты разработчика (F12), вкладка «Elements» или «Styles» — найдите элемент и посмотрите, применяется ли правило и не переопределено ли оно.
- В Device Toolbar (эмуляция мобильных) изменяйте ширину и смотрите, активируется ли медиазапрос (Chrome показывает активные медиа в панели).
6) Кэш и подключение файла
- Очистите кэш, убедитесь, что подключён нужный CSS-файл и что он загружен (Network → CSS файл реально возвращён).
- Если вы используете <link rel="stylesheet" href="style.css" media="...">, проверьте атрибут media.
7) Тип медиа (необязательно)
- Можно писать явно: @media only screen and (max-width: 768px) { ... } — но это не обязательно, обычно (max-width: ...) достаточно.
8) Примеры правильного кода
- Простой пример:
@media (max-width: 768px) {
.menu { display: none; }
}
- Или с min-width:
@media (min-width: 769px) {
.sidebar { display: block; }
}
9) Особенности препроцессоров/фреймворков
- Если вы используете Sass/LESS/Styled Components — убедитесь, что итоговый CSS корректен и медиазапросы не «затеряны» при компиляции.
- В некоторых фреймворках (например, CSS-in-JS) медиазапросы генерируются по-другому.
10) Тестовые приёмы для отладки
- Внутри медиазапроса временно добавьте видимое правило, чтобы точно увидеть срабатывание:
@media (max-width: 600px) {
body { outline: 5px solid red !important; }
}
- Посмотрите в инспекторе, «Matched CSS rules» покажет, активен ли медиазапрос.
Если хотите, пришлите полный блок CSS (несколько строк до и после медиазапроса) и укажите, на каком размере экрана вы тестируете — помогу найти конкретную причину.