我試圖使用媒體查詢，但他們不工作

Question

當我使用寬度作爲我的參數「最小寬度」媒體查詢工作正常。但是當我使用最小高度和最大高度時，我放入的最後一個尺寸是可用的。 我的代碼：

@media only screen 
and (min-height : 0px) , screen and (max-height: 600px) { 

#guy{ 
    position:absolute; 
    top:180px; 
    width:100%; 
    height:680px; 
    background:url(../img/guy.png); 
    background-repeat:no-repeat; 
    z-index:1; 
    background-size: 650px 450px; 
    } 

} 


@media only screen 
and (min-height : 601px) , screen and (max-height: 800px) { 

#guy { 
    position: absolute; 
    top: 80px; 
    width: 100%; 
    height: 680px; 
    background: url(../img/guy.png); 
    background-repeat: no-repeat; 
    z-index: 1; 
    background-size: 450px 250px; 
    background-position: center center; 
    } 

} 


@media only screen 
and (min-height : 800px) , screen and (max-height: 1000px) { 

#guy { 
    position: absolute; 
    top: 160px; 
    width: 100%; 
    height: 680px; 
    background: url(../img/guy.png); 
    background-repeat: no-repeat; 
    z-index: 1; 
    background-size: 650px 450px; 
    background-position: center center; 
    } 

} 


@media only screen 
and (min-height : 1001px) , screen and (max-height: 1600px) { 

#guy { 
    position: absolute; 
    top: 220px; 
    width: 100%; 
    height: 680px; 
    background: url(../img/guy.png); 
    background-repeat: no-repeat; 
    z-index: 1; 
    background-size: 850px 650px; 
    background-position: center center; 
    } 

} 

@media only screen 
and (min-height : 1601px) , screen and (max-height: 4000px) { 

     #guy { 
    position: absolute; 
    top: 260px; 
    width: 100%; 
    height: 680px; 
    background: url(../img/guy.png); 
    background-repeat: no-repeat; 
    z-index: 1; 
    } 

} 

而且不管是什麼我的屏幕分辨率，只有最小高度：1600級像素和最大4000px的作品，如果我沒有記錯的話，我可以使用高度正確的參數？我也不認爲有語法問題。有沒有人有這個問題？

Answer 1

看起來您的媒體查詢寫入不正確。你的第一個屬性後有一個逗號，然後重新聲明屏幕。請參閱：

@media only screen and (min-height : 0px) , screen and (max-height: 600px) { 

與

@media only screen and (min-height : 0px) and (max-height: 600px) { 

---

如果你試試這個，它應該開始工作：

@media only screen and (min-height : 0px) and (max-height: 600px) { 

    #guy { 
     position:absolute; 
     top:180px; 
     width:100%; 
     height:680px; 
     background:url(../img/guy.png); 
     background-repeat:no-repeat; 
     z-index:1; 
     background-size: 650px 450px; 
    } 
} 

@media only screen and (min-height : 601px) and (max-height: 800px) { 

    #guy { 
     position: absolute; 
     top: 80px; 
     width: 100%; 
     height: 680px; 
     background: url(../img/guy.png); 
     background-repeat: no-repeat; 
     z-index: 1; 
     background-size: 450px 250px; 
     background-position: center center; 
    } 
} 

@media only screen and (min-height : 800px) and (max-height: 1000px) { 

    #guy { 
     position: absolute; 
     top: 160px; 
     width: 100%; 
     height: 680px; 
     background: url(../img/guy.png); 
     background-repeat: no-repeat; 
     z-index: 1; 
     background-size: 650px 450px; 
     background-position: center center; 
    } 
} 

@media only screen and (min-height : 1001px) and (max-height: 1600px) { 

    #guy { 
     position: absolute; 
     top: 220px; 
     width: 100%; 
     height: 680px; 
     background: url(../img/guy.png); 
     background-repeat: no-repeat; 
     z-index: 1; 
     background-size: 850px 650px; 
     background-position: center center; 
    } 
} 

@media only screen and (min-height : 1601px) and (max-height: 4000px) { 

    #guy { 
     position: absolute; 
     top: 260px; 
     width: 100%; 
     height: 680px; 
     background: url(../img/guy.png); 
     background-repeat: no-repeat; 
     z-index: 1; 
    } 
} 

這裏的工作codepen例如：http://codepen.io/kpeatt/pen/pkDxq - 調整的高度框架看到它的行動。