作者:SREFLANKCWF | 来源:互联网 | 2023-05-25 12:44
是否可以根据浏览器窗口的高度(而不是使用媒体查询的宽度)更改CSS font-size
和line-height
标题?
1> James Donnel..:
是的.你可以用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;
}
Hello, world!