1

So I'm trying to aim three different version of screen with css media queries. They differ in their heights. 900px, 1080px, and 1200px. I've tried all kind of stuff and the best that partly works for now is this one:

@media (height: 900px) {
    .body-base{
        height:78%;
    }
}

@media (height: 1080px) {
    .body-base{
        height:82%;
    }
}

@media (height: 1200px) {
    .body-base{
        height:85%;
    }
}

I'm saying partly working because upper code only works in Firefox but not in Chrome or Opera for example... What am I doing wrong? And what is the right way that this kind of css settings works across all browsers?

4

1 回答 1

0

我刚刚在这里查看了 Mozilla 文档：Mozilla 链接，它证实了我在评论中的怀疑。此处height必须以 amin或为前缀max，即min-height在您的示例中。感谢 BoltClock，我刚刚看到它实际上不需要前缀，但目前我假设您的媒体查询针对的是确切的高度。例如media (height:900px)，仅当浏览器高度正好为 900 像素时才使用。

但是，我不确定为什么它在 Firefox 而不是 Chrome 中工作。两者都应该忽略它，因为浏览器如何假设您的意思是min-height或者max-height只有 Chrome 忽略它。

解决方案

决定你想要min-height还是max-height。在示例中，我将使用min-height移动优先方法：

@media (min-height: 900px) {    
    .body-base{
        height:78%;
    }
}

@media (min-height: 1080px) {    
    .body-base{
        height:82%;
    }    
}

@media (min-height: 1200px) {    
    .body-base{
        height:85%;
    }    
}
于 2013-11-13T10:30:47.843 回答