为什么我的CSS Media Query Min＆Max-Height属性错误触发？

Question

我正在尝试使用媒体查询来使图像从屏幕底部向上滑动到屏幕上取决于屏幕高度的一点。

但是，当我在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标签中指定内容？

任何帮助将不胜感激。