根据窗口高度更改字体大小答案

【问题标题】：Change font size based on window height根据窗口高度更改字体大小
【发布时间】：2015-03-22 17:35:42
【问题描述】：

是否可以根据浏览器窗口的高度（而不是使用媒体查询的宽度）更改标题的 CSS font-size 和 line-height？

【问题讨论】：

是 - 使用 vh 单位 - css-tricks.com/viewport-sized-typography
自卑推销：我为这种事情做了一个插件。你可以看看它是否符合你的需求。 github.com/kagagnon/Responsive-Font
@Karl-AndréGagnon 我也可以用这种方法编辑字体的行高和字母间距吗？
@BlakeBowman 不幸的是，还没有。这是我有一天要做的事情，但或者，您可以将 line-height 设置为 font-size 的百分比。

【解决方案1】：

是的。您可以使用 the vh (viewport height) unit 单独使用 CSS：

vh 单位
等于初始包含块高度的 1%。

font-size: 1vh;     /* Equal to 1/100th of the viewport height. */
font-size: 50vh;    /* Equal to 1/2 of the viewport height. */
font-size: 100vh;   /* Equal to the viewport height. */

同样适用于line-height:

line-height: 1vh;     /* Equal to 1/100th of the viewport height. */
line-height: 50vh;    /* Equal to 1/2 of the viewport height. */
line-height: 100vh;   /* Equal to the viewport height. */

演示

html, body, h1 { margin: 0; }

h1 {
  font-size: 50vh;
  line-height: 100vh;
  text-align: center;
}

&lt;h1&gt;Hello, world!&lt;/h1&gt;

【讨论】：

原发帖者没有指定他们定位的浏览器，但这张图表显示了兼容性：caniuse.com/#feat=viewport-units
@BlakeBowman 您可能还想注意vmin 单位。如果height 大于width，单独使用vh，我们的文本可能会换行成多行。 vmin 使用两个维度中较小的一个。 1vmin 等于两者中最小的大小的 100 分之一。

【解决方案2】：

使用 jquery：

$('#mySelector').css("font-size", $(window).height()/10);

带有调整大小处理的演示：http://jsfiddle.net/scu5Ltfh/

【讨论】：