Question

当我使用width作为我的参数“min-width”时，媒体查询工作正常。但是当我使用min-height和max-height时，我输入的最后一个尺寸是有效的。我的代码：

@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;
    }

}

无论我的屏幕分辨率如何，只有最小高度：1600px和最大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;
    }
}

这是一个有效的代码集示例：http://codepen.io/kpeatt/pen/pkDxq - 调整框架的高度以查看它的实际效果。

我正在尝试使用媒体查询，但它们无法正常工作

1 个答案: