vmin 中的字体大小占容器的百分比答案

【问题标题】：Size of font in vmin as percent of containervmin 中的字体大小占容器的百分比
【发布时间】：2017-05-04 04:31:42
【问题描述】：

在做一个班级项目，而有些事情让我们整个班级，包括我们的老师，都难住了。我们正在用 html、css 和 javascript 制作一个计算器。问题涉及 CSS。我们将计算器设置为高度：50vmin 和宽度：50vmin。

然后我们将 font-size 设置为 5vmin，期望它是容器高度的 10%。相反，字体大小约为高度的 11-12% 或更多。例如，在我的屏幕上，容器为 323.5 像素，字体大小为 37.981 像素。这不包括填充或边距：它是字体大小本身。有谁知道为什么字体没有出现 10%？有 5 行按钮，外加边距和内边距，效果非常不同。

谢谢！

【问题讨论】：

请用 html 和 css 发布一个完整的 jsfiddle 代码示例。据我所知，将字体大小设置为 vmin 应该可以工作
jsfiddle.net/dtarvin/d7uc7k67/5
jfiddle: jsfiddle.net/dtarvin/d7uc7k67/5

标签： css

【解决方案1】：

font-size: 10vh;

1vh = 视口高度的 1%

【讨论】：

谢谢，有问题。我们寻求的是容器高度的 10%，而不是视口高度。容器设置为 vmin，因此它始终是视口高度或宽度的 1/2。我们需要为响应式字体使用一个单位，即 vmin。