html - 两个 CSS 媒体查询之一未完成类(class)

Question

我想为 div 添加媒体查询，以在屏幕宽度小于 820px 和/或高度小于 615px 时更改位置，因此我做了以下操作:

@media screen and (max-width:820px) and (max-height:615px){
    #wrap{
        width:800px;
        height:610px;
        position:relative;
        margin:0 auto;
        top:100px;
        overflow:hidden;
        background:red;
    }
}

宽度不小于820px的条件有效，但高度不行......我做错了什么？

这是一个jsFiddle这样您就可以更容易地理解:

Answer 1

你可以像下面的代码那样做到这一点:

html:

@media screen and (max-width:820px) , screen and (max-height:615px) {
    #wrap{
        width:800px;
        height:610px;
        position:relative;
        margin:0 auto;
        top:100px;
        overflow:hidden;
        background:red;
    }
}