媒體查詢不接受另一個

嘿，夥計們，我試圖爲我的網站創建一個響應式佈局。我正在使用媒體查詢來設置我的2個導航欄的左右寬度。媒體查詢不接受另一個

我有點困惑，因爲相同的語法工作時間和一些寬度它不起作用。

例如：

@media (max-width:1000px) 
{ 
    .left{width:50%} 
    .right{width:50%} 
}

工作正常，但是當我這樣做：

@media (max-width: 720px) 
{ 
    .left{width:25%} 
    .right{width:25%} 
}

它仍然需要在1號聲明？顯示寬度可以低於100像素，它仍然是第一個媒體查詢。

來源

2015-10-20 Mr. Me7z

這是正確的，100px的仍比1000像素少一些。你有兩個媒體查詢都是真的 –

沒有看到一個具體的例子，這應該工作，但你應該知道媒體查詢的命令是重要的。

正確順序（使用最大寬度時：

@media screen and (max-width:1000px) { 
    .left { 
     width:50%; 
    } 
    .right { 
     width:50%; 
    } 
} 
@media screen and (max-width: 720px) { 
    .left { 
     width:25%; 
    } 
    .right { 
     width:25%; 
    } 
}

JSfiddle Demo

不正確的順序（使用最大寬度）時：JSfiddle Demo

來源

2015-10-20 11:14:43

我不禁注意到你的訂單與OP的相同 –

我確實說過它應該可以工作但是不清楚他實際上是在使用* both *同一時間，如果是，按什麼順序。 –

嗯......我會回答說，最好是明確地寫'（min-width：721px）和（max-width：1000px）'以避免模棱兩可，但你說得對，可能還有其他的東西在玩。我的意思是，你的小提琴確實有效，所以OP沒有提供所有的信息。 –

媒體查詢不接受另一個

回答

相關問題