爲什麼只有一個媒體查詢不起作用？

我對一個網站使用多個媒體查詢，而最大的（最小寬度：1201px）是唯一沒有實現任何更改的查詢。下面是我用，鍵入完全在我的CSS見過的查詢，並嚴格按照此順序：爲什麼只有一個媒體查詢不起作用？

@media only screen and (min-width: 320px) {} 

@media only screen and (min-width:480px) {} 

@media only screen (min-width: 768px) and (max-width: 991px) {} 

@media only screen (min-width: 992px) and (max-width: 1200px) {} 

@media screen (min-width: 1201px) {}

我已經包含在index.html的頭部的meta標籤：

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

我發現奇怪的另一件事是在index.html我已經應用媒體查詢與不同大小的圖片的背景封面照片，我用那裏最小寬度：1200工作。

我真的希望你們中的一個能夠確定我失蹤的事情。

來源

2016-11-07 Kali

並非所有這些查詢都能正常工作。我認爲這就是你以後的樣子。

@media only screen and (min-width: 320px) and (max-width: 479px) {} 
@media only screen and (min-width:480px) and (max-width: 767px) {} 
@media only screen and (min-width: 768px) and (max-width: 991px) {} 
@media only screen and (min-width: 992px) and (max-width: 1200px) {} 
@media screen and (min-width: 1201px) {}

看到它在這裏的行動：https://jsfiddle.net/e7wdmca4/1/

來源

2016-11-07 21:07:29 simnys

我想補充到什麼@ kolsyrad說，我會改變第一個查詢到媒體唯一屏幕和（最大寬度：479px）{} 這樣它將適用於所有的小屏幕上4700px寬度:) –

@Saa_keetin好提，我'如果在320px以下有一些特殊情況，請留下它:) – simnys

謝謝您的回答！我會試一試，並希望它能正常工作:)我在這方面比較新，因此獲得幫助總是很好的@kolsyrad – Kali

你缺少一個「和」最後一個查詢： @media屏幕（最小寬度：1201px）{}

來源

2016-11-07 21:11:56

爲什麼只有一個媒體查詢不起作用？

回答

相關問題