媒體查詢：使用最小寬度

我用下面的代碼，從而只在大屏幕上顯示某些元素的錯誤：媒體查詢：使用最小寬度

.forkit, .forkit-curtain { 
    display: none; 
} 

@media only screen and (min-width: 1400px) { 
    .forkit, .forkit-curtain { 
    display: block; 
    } 
}

但是，當屏幕1300px顯示的元素，只有隱藏當寬度爲1250像素，因此媒體查詢最小寬度1400px也適用於屏幕尺寸稍微低一點的不良行爲。

我不知道爲什麼媒體查詢得到一個錯誤的屏幕大小。發生什麼事？

感謝

來源

2013-02-19 xger86x

我認爲我們需要的不僅僅是幫助你。此外，您的問題標題有'max-width'，但您不使用'max-width'代碼 – wakooka 2013-02-19 11:45:34

對不起，我更新了問題 – xger86x 2013-02-19 11:58:17

我懷疑的差異並不50px的，但更接近於20像素。更重要的是，我懷疑它對所有瀏覽器都沒有同樣的反應。嘗試比較Chrome和Firefox的中斷點。如果它們關閉大約20px，則區別是因爲：

在瀏覽器查詢中包含滾動條寬度的IE，Firefox和Opera follow the W3C spec，其中Webkit瀏覽器不支持。

因此，當您要求瀏覽器在1400px處觸發時，它會在大多數瀏覽器中以大約1383px觸發。

您不能強制瀏覽器在此刻對待它，所以最好的選擇是修改您的佈局，使其與媒體查詢中的寬度不緊密相關（添加額外的邊距）。有了這樣的佈局，當它早晚觸發幾個像素時，它不會產生太大的差別。

來源

2013-02-19 13:46:13

媒體查詢：使用最小寬度

回答

相關問題