Bootstrap v2：我不明白媒体查询是如何工作的

Question

我做了第一次媒体查询！我将以下媒体查询添加到custom.css页面：

@media (max-width: 1200px) {
footer {
  background-color: red;
   }
}

我将页脚设置为红色，以便我可以看到媒体查询的工作原理。当我将浏览器扩展到1200px时，页脚在1183px左右变成棕色，这是在我达到1200px之前，即使我“告诉”媒体查询保持红色达到1200px。为什么在达到1200px之前红色会消失？

实时预览site is here。

编辑：我注意到实际断点不是1200px，而是1183px ......这就是当页脚变为红色时，尽管我的媒体查询用max-width编写：1200px .....

Answer 1

你的medai查询对我很好。

通过@Kevin Reid获取评论，jQuery在窗口宽度计算中包含滚动条。如果您使用@media查询，webkit浏览器（例如Chrome和Safari）不包含滚动条，但我读过其他人的评论，Firefox在媒体查询计算中确实包含滚动条。

如果您因为某些内容无法按预期在页面上工作，请注意一个细节，即您的Bootstrap CSS使用

更改其布局@ 1200 px

@media (min-width: 1200px){
... grid changes here ...
}

您的考试是

@media (max-width: 1200px) {
footer {
background-color: red;
}
}

所以它实际上与1px的bootstrap CSS不同步。您可以将其更改为

@media (max-width: 1199px) {
footer {
background-color: red;
}
}