如何动态填充页面1个字母

Question

我在页面上有一个字母.我希望它真的很大(我的字体大小设置为2000%!).如何使其响应以使其位于所有屏幕的中心？在大小的情况下,我知道在调整浏览器大小时,字母周围的填充是一个真正的问题.我正在尝试为儿童制作闪存卡以学习他们的信件.

Answer 1

使用 viewport units

1vh =视口高度的1/100.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow:hidden;
}

div {
  font-size: 99vh;
  text-align: center;
  line-height: 1;
}

<div>A</div>

Codepen演示