Why don't media queries work on localhost (chrome)?

Question

css

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

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

Everything seems to be ok, right? Easier nowhere.
But no. Chrome localhost - media queries do not work correctly.
prntscr.com/a53tdm
prntscr.com/a53tqs
If you open it as a local file, then everything is ok.
What is the problem?

Answer 1

If the following meta tags are not specified in the head section, it may not work either.

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

Answer 2

As I understand it, you use Less with the BEM methodology)) . what does it convert to css? what does a media query look like?

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

}