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

Question

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

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

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

我的网站的实时预览在这里。

编辑：我注意到实际的断点不是 1200 像素，而是 1183 像素……那是尽管我的媒体查询使用 max-width:1200 像素编写的，但页脚变成了红色.....

score 0 · Accepted Answer

你的 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;
}
}

所以它实际上与引导 CSS 不同步 1px。你可以把它改成

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

1 回答 1