Javascript 带高度的媒体查询

情境：我有一张图片和图片下方的两个按钮，它们的宽度都一样

问题：如果视口水平方向太长，如果不向下滚动，则无法看到按钮。这是平板电脑和小型笔记本电脑的问题。我当前的CSS如下所示：

 .image{
        width:90%;
        height: 50%;
        max-width: 500px;
        max-height: 250px;
        margin-bottom: 10px;
    }


    .buttonAnswer{
        width: 90%;
        max-width: 500px;
        font-size: 25px;

我正试图找到一种方法，使用媒体查询或其他东西来缩小按钮和图像的大小，这样你就可以在任何大小的设备上都看不到它们

要举例说明这个问题有点难。在下面查看，然后将视口缩小到窄高度和长宽度，您应该看到您只能看到图像，并且必须滚动才能查看按钮

.image{
宽度：90%；
身高：50%；
最大宽度：500px；
最大高度：250px；
边缘底部：10px；
}
纽特南斯威尔先生{
宽度：90%；
最大宽度：500px；
字体大小：25px；

对
否

我认为使用媒体查询是解决问题的正确方法。您需要为关键视口上的图像定义另一个大小（尤其是最大宽度）

但您也可以使用视口单元来定义图像的大小。现在您已经设置了固定的最大宽度，但不考虑视口的大小。您可以将其设置为视口高度的50%，并相应地更改其他值：

 .image{
        max-height: 50vh;
    }

---

您还可以将这两种解决方案结合使用。

使用

最大高度：50vh

，这意味着它将占据显示它的任何屏幕的50%

@介质（最小宽度：970px）{
.外部{
身高：100%；
最小宽度：100%；
}
.形象{
最大宽度：100%；
高度：自动；
最大高度：50vh；
}
纽特南斯威尔先生{
宽度：90%；
字体大小：25px；
}
}
@介质（最大宽度：970px）{
.外部{
身高：100%；
最小宽度：100%；
}
.形象{
宽度：90%；
高度：自动；
最大高度：50vh；
}
纽特南斯威尔先生{
宽度：90%；
字体大小：25px；
}
}

对
不

图像和按钮是页面上唯一的东西吗？或者还有其他东西吗？有很多方法可以解决这个问题，您可以使用带高度的媒体查询，或者使用带高度属性的

vh

单元。