如果屏幕高度小于元素高度如何删除样式

Question

我使用绝对定位将元素按屏幕高度居中。 但是，当屏幕的高度小于元素宽度时，它会切割元素的一部分，使其顶部无法到达。如果屏幕高度小于元素高度，如何添加和删除样式？

https://codepen.io/alena-chuyankova/pen/YzmWYKZ

.wrap {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    background-color: white;
    gap: 1rem;
    width: 45%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    display: flex;
    flex-direction: column;
    padding: 4rem;
    
}

Answer 1

使用CSS3

@Media

，您可以实现任何响应条件；对于这种情况，我建议使用

aspect-ratio

@media (min-aspect-ratio: 1/1) { //width >= height
     .wrapper{
         //your CSS here
     }
}

这样就可以为 CSS 快速响应情况创造条件。

要了解更多选项，我建议阅读MDN（因为我觉得W3Schools缺乏示例）