流体排版
创建根据视口宽度进行缩放的文本。
- 使用
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);
}
创建根据视口宽度进行缩放的文本。
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);
}