html - 当窗口宽度逐渐减小时需要帮助调整按钮中的字体大小和垂直居中

Question

我有一个按钮，里面有一些文字。当前设置按钮的方式是，当窗口宽度减小时，按钮的垂直高度也会根据窗口宽度减小。当我逐渐调整宽度大小时，我希望按钮内的文本也逐渐减小，同时始终垂直保持在按钮中间。我目前无法弄清楚如何让它工作。截至目前，当我调整窗口宽度和垂直高度减小时，文本仍然很大并且没有垂直居中。

我可以使用媒体查询，但这需要我为不同的宽度创建大量媒体查询。

我已经尝试了很多方法来尝试实现它，但我似乎无法让它发挥作用。如果有人能向我展示可提供此功能的 css 类模板，我将不胜感激。

这是我当前用于按钮的 css 类:

.buttonClass{
    position: absolute;
    line-height: 3em !important;
    height: 12.5%;
    width: 25%;
    bottom: 1%;
    right: 0.25%;
}

Answer 1

也许尝试为您的字体大小使用视口(viewport)宽度:

.buttonClass {
    position: absolute;
    font-size: 2vw;
    line-height: 3em;
    height: 12.5%;
    width: 25%;
    bottom: 1%;
    right: 0.25%;
}

作为引用，1vh = .01 * 视口(viewport)高度。这是一个 Fiddle .希望这会有所帮助。