媒體查詢斷點不準確

Question

我正在爲一個頁面創建媒體查詢，但我在讓它們在我的媒體查詢中指定的點處發生問題時遇到問題。

比如我有：

@media all and (max-width:1000px) { 
    header nav ul.nav_items li a { 
     padding:15px 10px 15px;   
    } 
} 

但是當我使用並公開Chrome的開發者工具，並觀察瀏覽器的視/寬，CSS規則採取的地方約1226px效果。爲什麼不是正好應用1000px的CSS規則？

這裏是我的HTML/CSS的的jsfiddle：https://jsfiddle.net/at68m0zp/

Answer 1

通過移動媒體查詢到你的CSS文件的年底，你會使其覆蓋的設定值。後面出現的東西（以及它得到的越具體），它收到的偏好越多。由於您的查詢位於文件的開頭，所以稍後對標題nav的顯示屬性所做的任何更改都無法應用。請注意，媒體查詢不會增加特殊性或得到任何特殊處理，只是在它們處於由它們定義的範圍內時纔會被忽略。

因此，您的文件中可能會有一段代碼，其最大寬度爲1000px。因爲它是在900像素之後出現的，但屏幕尺寸都是有效的，所以1000像素會生效。

我有一個片段的變化，但因爲你發佈你的整個HTML和CSS它是太長，不能發佈在這裏。相信我，如果你把它移到盡頭，它就會起作用

Answer 2

326px區別絕對不是'不準確'。有些事情在這裏大打折扣。我可能猜測你有更多的媒體疑問，並且錯誤地設置了min-widthmax-width。

最好要檢查什麼是真正回事：

1. 火狐 - 命中F12（或開放開發工具時，在Mac）
2. 轉到「樣式編輯器」的開發工具頂欄
3. @右側列顯示@media規則列表（突破點）

調試時玩得開心，祝你好運。