html - 媒体查询最小宽度 1200px 不起作用

Question

我正在尝试了解媒体查询在 css 中的工作原理。我正在寻找 Bootstrap 文件并将 .container @media 查询复制到空白 css 并添加颜色以在实时操作中查看它:

文件.css:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color:green;
}

@media (min-width: 768px) {
    .container {width: 750px;background-color:red;}
}
@media (min-width: 992px) {
     .container {width: 970px;background-color:blue;}
}
@media (min-width: 1200px ) {
    .container {width: 1170px;background-color:red;}
}

index.html

<div class="container">Hello</div>

当我运行它并调整浏览器窗口大小时，div 会改变颜色但不会变成红色 (1200+ px)。

为什么会这样？

编辑:

在 firefox 中工作正常，在 Chrome 中出现问题。

Answer 1

您可以尝试在

上查看和测试您的网页

TestSize

ScreenFly

您的代码运行正常。