条件媒体查询

Question

我需要根据某些条件调整和隐藏元素的大小，但我无法做到。

伪代码：

If height is less than or equal to 400px : hide
If height is between 401-600 : do x
If height is greater than or equal to 601px : do y

我这样做：

@media only screen and (max-height: 400px) {
    /* hide */
}
@media only screen and (min-height: 401px) and (max-height: 600px) {
    /* do X */
}
@media only screen and (max-height: 601px) {
    /* do Y */
}

...但它总是默认为最后一个条件： do Y

Answer 1

你的最后一个条件应该是最小高度而不是最大高度。也不需要设置and (max-height: 600px)因为下面的MQ无论如何都会匹配

http://jsfiddle.net/rnrlabs/3r382qts/

@media only screen and (max-height: 100px) {
    .condition {
        display: none;
        visibility: hidden;
    }
}
@media only screen and (min-height: 101px)  {
    .condition {
        color: red;
    }
}
@media only screen and (min-height: 301px) {
    .condition {
        color: blue;
    }
}