引導V2：我不明白媒體查詢是如何工作的

Question

我做了我的第一個媒體查詢！我增加了以下媒體查詢到我的custom.css頁：

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

我做了註腳紅色，所以我可以看到媒體查詢的行動是如何工作的。當我將瀏覽器擴展到1200像素時，即使我「告訴」媒體查詢保持紅色達到1200像素，頁腳也會在1183像素之前變成棕色，而這在我達到1200像素之前是這樣。爲什麼紅色在我達到1200像素之前就消失了？我site is here的

實時預覽。

編輯：我注意到，實際斷點不是1200像素，但1183px ......那就是當頁腳變爲紅色，儘管我與媒體的最大寬度書面查詢：1200像素.....

Answer 1

你美泰查詢看起來不錯。

由@Kevin Reid在註釋拾起，jQuery包含在窗口寬度計算滾動條。如果您使用@media查詢，webkit瀏覽器（例如Chrome和Safari）不包含滾動條，但我已閱讀其他人的評論，Firefox在媒體查詢計算中包含滾動條。

如果你問，因爲你希望在一個頁面的細節要注意的有什麼不工作是你的引導CSS改變其佈局@ 1200像素與

@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; 
} 
}