Не работают медиа-запросы в css

497
26 ноября 2016, 18:43

Задаю в head

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">

В css-файл

@media all and (max-width: 1050px){
header ul.main_menu{
    margin-left: 7vw;
}
header ul.main_menu li{
    padding-left: 1.5vw;
}
} /* max-width: 1050px */

В Chrome в режиме разработки отзывчивого дизайна не работает. С чем это может быть связано?

Answer 1

Указанный вами код работает так, как и положено. Он применяется только при ширине экрана меньше или равной 1050px.

Вот пример для демонстрации:

@media all and (max-width: 1050px) { 
  body { 
    background-color: maroon; 
  } 
}

Вот скриншот работы указанного сниппета (с мета-тегами) в режиме разработки Chrome:

Я рекомендую вам проверить указанный путь к css-файлу.

READ ALSO
Как сделать аккордион меню [закрыто]
CSS

Как сделать аккордион меню [закрыто]

Привет всем, подскажите, пожалуйста, как сделать аккордион меню под следующие условия: 1) Аккордион меню имеет 7 элементов (заголовок + текст,...

 332
Как выводить текст по середине окна?
CSS

Как выводить текст по середине окна?

У меня есть небольшой код на javascriptОн показывает небольшое окно при загрузке страницы с некоторым текстом

 304
Интерактивные карты svg
CSS

Интерактивные карты svg

сделал карту беларуси и разбил по районам, не подскажите как еще сделать разбивку по областям

 322
Как выровнять Div по вертикали?
CSS

Как выровнять Div по вертикали?

html

 343