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

Question

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

Answer 1

是的.你可以用CSS单独使用做到这一点的vh(视高度)单位:

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>