@media查詢問題

我正在修改別人的css，並嘗試使頁面響應執行@media查詢。我實現：@media查詢問題

@media screen and (max-width: 1300px), 
screen and (max-width: 1024px) {} 

@media only screen and (max-width: 860px) {}

工作正常，但是當我實現 @media屏幕（最大寬度：600像素）{}看來它不工作。

或 - 在鉻和歌劇似乎工作相當好，但不是FF：在FF頁面被切斷在右端，沒有滾動，我真的不知道爲什麼。即使我使用positon，它也不會改變：相對，我檢查 - 我沒有任何'overflow：hidden'。

另一件事 - 對於媒體查詢，建議使用最小寬度 - 但如果使用最小寬度，則只應用最低值（例如最小寬度：600）。

我想我錯過了這裏的東西......任何建議？我真的很感激他們..因爲我非常熱衷於響應式網頁設計。

來源

2012-01-05 Angel M.

這是測試您的@media查詢工作或不乾淨的方式：

body { 
    background-color:black; 
} 

@media screen and (min-width: 1024px) and (max-width: 1300px) { 
    body { 
     background-color:red; 
    } 
} 

@media screen and (max-width:860px) { 
    body { 
     background-color:yellow; 
    } 
} 

@media screen and (max-width: 600px) { 
    body { 
     background-color:orange; 
    } 
}

你的背景應該是black在默認情況下，red如果如果你的屏幕的最小寬度爲1024個像素，yellow如果它降到860px以下，並且orange降到600px。

因此，請確保樣式表中沒有衝突的媒體查詢。

http://jsfiddle.net/crUVv/show/

來源

2012-01-05 12:54:21

謝謝，Andres ...我用螢火蟲測試。問題在於，在FF中無法使用，只能在Opera和Chrome中使用。另一件事是當頁面大於視口時出現的滾動條 - 我無法讓它出現。該頁面被截斷。（在FF中除了最大寬度600px外都是全部工作） – 2012-01-05 14:32:32

@AngelM。我提供的演示程序對於我在firefox（3.6.17）中的所有'@ media'查詢都可以正常工作，您可以提供一個鏈接到您的網站，以便我們可以看一看嗎？我確定在某處必須有一些相互衝突的@ @ media'查詢。 – 2012-01-05 15:19:10

你的測試對我來說是非常有用的......但不幸的是 - 即使這不是在我的FF v.9中工作，我真的不知道爲什麼..我會給你鏈接，但我正處於現在發生重大變化 - 我決定按照自己的方式去做，然後就會看到。如果你仍然願意，我會申請。謝謝 – 2012-01-05 18:08:45

這可能不是你的實際問題，但我認爲值得指出的是，對於小尺寸的視測試響應媒體查詢時，請確保所有瀏覽器窗口裝飾不湊了過來。

我最近有這樣的「問題」。起初，我認爲Firefox媒體查詢是錯誤的，直到我檢查並意識到這是瀏覽器導航欄大小阻止我實際調整低於我的最小寬度值。

即它不是頁面有問題 - 導航欄中有太多東西阻止瀏覽器在某個點以下調整大小。這也解釋了爲什麼行爲似乎不同在不同的瀏覽器

關閉瀏覽器導航欄，它工作正常。衛生署！

來源

2012-03-25 00:30:32 tardate

THX在這裏爲我節省了大量的進一步測試... – jd291 2012-07-21 08:46:51

@media查詢問題

回答

相關問題