我试图使用媒体查询，但他们不工作

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 - 调整的高度框架看到它的行动。