css - 只有一个 CSS 媒体查询有效

Question

我正在使用 CSS @media 根据屏幕分辨率调整我的网站无论我切换到高度为 768 还是 720 的分辨率，它仍然会像我的屏幕分辨率具有 720 像素的高度一样

.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

对于第一个媒体查询，您还应该使用 min-height 设置为 720px 和 max-height 设置为 768px