Question

我想在屏幕宽度小于820px和/或小于615px的高度时为div添加媒体查询来改变位置，所以我做了这个：

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

Answer 2

当一个或另一个规则为真时，逗号将规则分开以呈现CSS

@media screen and (max-width:820px), screen and (max-height:615px) {
  ...
}

对每条规则说and说整个语句都必须为true才能使CSS生效。

分隔规则的逗号等同于or

两个CSS媒体查询中的一个没有上课

2 个答案: