Question

我正在使用CSS @media根据屏幕分辨率调整我的网站无论我切换到高度为768或720的分辨率，它仍将表现为我的屏幕分辨率高度为720px

.group-container{
    min-width:1210px;
    max-width:70000px;
    width:1210px;
    margin-left:2.5%;
    height:87%;
    margin-top:1%;
}

@media only screen and (max-height: 768px) {
    .group-container{
        margin-top:150px;
    }
}

@media only screen and (max-height: 720px) {
    .group-container{
        margin-top:3px;
        height:90%;
    }
}

Answer 1

对于第一个媒体查询，您还应该使用最小高度设置为720px，最大高度设置为768px

Answer 2

如果您尝试使用（max-width：... px）而不是？

DispatcherServlet

这样您就不会依赖于您的身高，而是依赖于它所显示的窗口的宽度。例如：

你的分辨率是900x1600。

调整窗口高度不会产生太大影响。如果你在哪里使用max-width，那么如果你调整到例如600x1200，它会产生更大的效果。

编辑：我认为你应该使用的原因是，在响应式设计方面，高度并不重要。高度可能会改变，但总是可以滚动，所以使用高度几乎没有效果。

设备的宽度很重要，宽度对于响应式设计很重要（假设您的网站不能水平滚动）。最好根据显示器的宽度创建查询，然后依靠高度来解决问题。

只有一个CSS媒体查询正在运行

2 个答案: