Почему не работают медиа-запросы на localhost (chrome)?

Question

[krs-front]

@media (min-width: 992px) {
    .navigation {
        &_item {
            background: red;
        }
    }
}

@media (min-width: 1200px) {
    .navigation {
        &_item {
            background: blue;
        }
    }
}

Вроде все ок, да? Проще некуда.
Но нет. Хром локалхост - не правильно срабатывают медиа-запросы.
prntscr.com/a53tdm
prntscr.com/a53tqs

Если открыать как локальный файл, то все ок.

В чем проблема?

Comments

[NataVinokur]

у меня была таже проблема:((, может кому пригодиться : посмотрите в браузерную строку (точнее в правую часть), нажми на иконку лупы и потом "сбросить масштаб" --- и медиа начали работать :)))

Answer 1

[jazzcatt]

Если в секции head не указаны метатеги следующего содержания, может тоже не работать.

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

Answer 2

[Дмитрий Антонов]

Я как понял вы Less используете с методологией БЭМ )) . что он у вас преобразует в css ? как выглядит медиа запрос ?

@media screen and (min-width:480px) {

}

Comments

[krs-front]

media (min-width: 992px) {
.navigation_item {
background: red;
}
}

media (min-width: 1200px) {
.navigation_item {
background: blue;
}
}