CSS Media查询在Firefox中有效，但在Chrome中不起作用，需要建议

Question

所以我正在尝试使用 css 媒体查询瞄准三个不同版本的屏幕。它们的身高不同。900 像素、1080 像素和 1200 像素。我已经尝试了各种东西，目前部分有效的最好的是这个：

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

我说部分工作是因为上层代码仅适用于 Firefox 而不是在 Chrome 或 Opera 中，例如......我做错了什么？这种 css 设置在所有浏览器上工作的正确方式是什么？

Answer 1

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

但是，我不确定为什么它在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%;
    }    
}