为什么我的CSS媒体查询是Min&；最大高度特性缺火？

我尝试使用媒体查询使图像从屏幕底部向上滑动到屏幕上的某个点，这取决于屏幕高度

然而，我发现当我在Chrome中调整窗口大小时，只有当屏幕大小为指定像素量的0.33时才会发生变化，我完全不明白为什么

我的CSS如下所示：

.screen {
    position: absolute;
    bottom: -157vw;
    left: 15.5vw;
    margin: 0 auto;
    display: block;
    transform: scale(1.3)
}

@media (min-height: 800px) {
    .screen {
        animation: screen800 1300ms;
        animation-fill-mode: forwards;
    }
}

@media (min-height: 630px) and (max-height: 799px) {
    .screen {
        animation: screen629 1300ms;
        animation-fill-mode: forwards;
    }
}

@media (max-height: 629px) {
    .screen {
        animation: screen630 1300ms;
        animation-fill-mode: forwards;
    }
}


@keyframes screen800 {
    from { bottom: -157vw}
    to {bottom: -33vw} 
}

@keyframes screen630 {
    from { bottom: -157vw}
    to {bottom: -56vw}
}

@keyframes screen629 {
    from { bottom: -157vw}
    to {bottom: -68vw}
}

我不确定是什么原因导致了这种情况，媒体查询的代码必须是正确的-这是浏览者的问题还是我应该在meta html标记中指定什么

---

任何帮助都将不胜感激。

您可能缺少一个合适的

视口

meta。同意@04FS。类似于