CSS 新特性，轻松实现响应式布局

CSS 数学函数 clamp()

浏览器会首先尝试使用 PREFERRED 值，如果 PREFERRED 值小于 MIN，则采用 MIN 值，反之，则采用 MAX 值。

clamp(MIN, PREFERRED, MAX)

流体式字体排版

// clamp(最小值，首选值，最大值)
font-size: clamp(1.5rem,5vw,3rem)

• 1.5rem (最小值)：在非常窄的屏幕上（如手机），字体大小最小为 1.5rem（约 24px），保证可读性

• 5vw (首选值)：字体大小根据视口宽度进行动态缩放，5vw 5%。当用户缩放浏览器窗口时，字体会如丝般顺滑地变大或变小

• 3rem (最大值)：在非常宽的屏幕上（如 4K 显示器），字体大小最大为 3rem（约 48px），保持美观

最终，字体大小会在 24px 到 48px 之间根据屏幕宽度平滑地过渡，不再有断点之间的跳变，这是真正的“流体式”设计！

clamp() 在布局中的应用

例如：一个内容区块的宽度自适应，但又不想它在小屏幕上太窄，或在大屏幕上太宽

.container {
    width: clamp(400px,90%,1200px);
    margin: 0 auto;
}

• 在小屏幕上，宽度是 90%，但最小不会低于 400px
• 在超大屏幕上，宽度也是 90%，但最大不会超过 1200px