媒体查询min-width 1200px不起作用

Question

我正在尝试了解媒体查询在css中的工作方式。我正在寻找一个引导程序文件并将.container @media查询复制到一个空白的CSS并添加颜色以在实际操作中查看它：

file.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

您的代码运行正常。