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

Question

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

Answer 1

是的。您可以使用 the vh (viewport height) unit 单独使用 CSS 来完成此操作:

vh unit
Equal to 1% of the height of the initial containing block.

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>