当窗口宽度逐渐减小时，需要帮助在按钮中重新调整大小并垂直居中字体

Question

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

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

我已经尝试了许多方法来尝试实现这一点，但我似乎无法让它工作。如果有人可以向我展示一个提供此功能的css类模板，我将非常感激。

这是我目前用于按钮的css类：

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

Answer 1

也许尝试使用视口宽度作为字体大小：

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

供参考，1vh = .01 *视口高度。这是一个Fiddle。希望这会有所帮助。