流体排版
创建根据视口宽度进行缩放的文本。
- 使用
clamp()
CSS 函数将font-size
的值限制在1rem
和3rem
之间。 - 使用公式
8vw - 2rem
计算font-size
的响应式值(在600px
时为1rem
,在1000px
时为3rem
)。
<p class="fluid-type">Hello World!</p>
.fluid-type {
font-size: clamp(1rem, 8vw - 2rem, 3rem);
}