Question

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

Pseduo代码：

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

你的最后一个条件应该是min-height而不是max-height。也不需要设置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;
    }
}

Answer 2

@media only screen and (max-height: 601px) {

应该是

@media only screen and (min-height: 601px) {

因为你想要“如果高度大于或等于601px：做y”但是max-height会设置最大高度。

Answer 3

您的上一个条件应该是min-height而不是max-height：

@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 (min-height: 601px) {
    /* do Y */
}

Answer 4

@media only screen and (max-height: 400px) {
     .Submenu {display:none !important;}
}
@media only screen and (min-height: 401px) and (max-height: 600px) {
    .Submenu {display:block;}
}
@media only screen and (min-height: 601px) {
     .Submenu {display:inline-block !important;}
}

有条件的媒体查询

4 个答案: