Question

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

Answer 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;
}

<h1>Hello, world!</h1>

Answer 2

使用jquery：

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

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

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

2 个答案:

演示