流体排版

创建根据视口宽度进行缩放的文本。

  • 使用 clamp() CSS 函数将 font-size 的值限制在 1rem3rem 之间。
  • 使用公式 8vw - 2rem 计算 font-size 的响应式值(在 600px 时为 1rem,在 1000px 时为 3rem)。
<p class="fluid-type">Hello World!</p>
.fluid-type {
  font-size: clamp(1rem, 8vw - 2rem, 3rem);
}