Блог

Я пытаюсь использовать медиазапросы, чтобы заставить изображение скользить вверх от нижней части экрана к точке на экране, которая зависит от высоты экрана.

Однако, когда я изменяю размер окна в 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?

Буду признателен за любую помощь.