只有第一個媒體查詢工作

當使用媒體查詢時，只有第一組似乎工作，我不知道爲什麼。如果我將它們交換，那麼只有第一個工作。我試過從最大寬度改爲最小寬度，我嘗試刪除和條件，我嘗試刪除所有我的Javascript。我嘗試刪除所有的CSS，只有身體{display：none}的媒體查詢。媒體查詢是在我的樣式表的末尾。視口meta是正確的（見下文）。只有第一個媒體查詢工作

這些嘗試都不能解決我的問題。任何人都知道爲什麼會發生這種情況？我和@media一起工作過一百次，從來沒有遇到過這個問題。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

@media (max-width: 740px) and (min-width: 420px) { 
    .product { 
     width:45% !important; 
     margin:10px 10px 10px 10px !important; 
    } 

    .products-container select { 
     width:85%; 
    } 
} 

@media (max-width: 340px) { 
    body { 
     display:none; 
    } 
}

更新我檢查FireFox的控制檯。我實際上得到以下錯誤：懸掛組合。由於選擇器錯誤，規則集被忽略。

我得到它想說的，但查詢的語法沒有錯。

來源

2013-07-30 Hiriji

您知道這些媒體查詢不支持寬度在340像素到420像素之間的圖像，也適用於寬度大於740像素的圖像...對嗎？ – Danield

@Danield我是。這些媒體查詢旨在調整產品大小在420像素和740像素之間的大小，然後在小於340像素時將主體顯示設置爲無。第一個查詢起作用，第二個查詢被忽略。 – Hiriji

看看這個小提琴：http://jsfiddle.net/danield770/VRWdd/ - 媒體查詢工作正常 - 即兩個媒體查詢一起工作 – Danield

沒關係，想通了。

在某種程度上是CSS中隱藏的字符。考慮到我自己輸入了一切，也許Dreamweaver把它放在那裏，這很奇怪。一個小故障也許？無論如何，將它複製到MS Word中並粘貼回Dreamweaver中修復它。

P.S感謝您的幫助！

來源

2013-07-30 09:22:56 Hiriji

您是否使用記事本++或其他標記進行標記？有時我寫一個完整的文檔（css，html），不檢查編碼。將編碼從ANSI更改爲UTF-8顯示我奇怪的字符（如[e + v]，那些東西）。 – Arkana

@Arkana不用我直接寫在Dreamweaver中。這很奇怪，因爲我從來沒有遇到過這個問題。然後再次，在不同的場合，我的Dreamweaver崩潰，並用空格替換我的所有CSS，所以猜測它不總是可信的:) – Hiriji

那麼，你能標記你的答案是正確的嗎？爲了幫助其他用戶誰來到這裏與類似的問題:)（關閉主題，如果我的DW這樣對我的尖叫將在Omicron Persei 8 xD聽） – Arkana

你media queries像現在這樣，踢的時候，屏幕具有

0-340px（第二媒體查詢）的寬度和

420PX-740px（第一媒體查詢）

他們不「T迎合340px和420PX之間的寬度..也爲寬度> 740px

但可以肯定，無論是媒體查詢工作....

看到這個FIDDLE

來源

2013-07-30 09:05:49 Danield

這就是爲什麼它沒有任何意義，因爲他們沒有在我身邊工作。我檢查了控制檯 - 我已經更新了我的問題。 – Hiriji

檢查未標記標籤的標記 – Danield

只有第一個媒體查詢工作

回答

相關問題