我正在尝试使用媒体查询，但它们不起作用

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 像素和最大 4000 像素有效，如果我没记错的话，我可以使用高度作为参数，对吗？我也不认为存在语法问题。有人遇到过这个问题吗？

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 — 调整框架的高度以查看它的实际效果。