Question

所以我试图用css媒体查询瞄准三个不同版本的屏幕。他们的高度不同。 900px，1080px和1200px。我已经尝试了各种各样的东西，现在最好的部分就是这个：

@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 link，这证实了我在评论中的怀疑。此处height必须以min或max作为前缀，即您的示例中为min-height。感谢BoltClock，我刚刚看到它实际上并不需要加前缀，但目前我假设你的媒体查询都是针对那个确切的高度。例如。 media (height:900px)仅在浏览器完全高度为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%;
    }    
}

CSS Media查询可以在Firefox中运行，但不能在Chrome中运行，需要提供建议

1 个答案:

解决方案