如何用CSS Clamp在指定视口区间内设置固定字体大小？

可以实现，无需媒体查询，通过clamp()结合calc()和CSS的sign()函数就能构造出符合需求的表达式，让字体在680px-1020px视口区间内固定为28px，低于680px时用20px，高于1020px时用40px。

实现代码 #

font-size: clamp(
  20px,
  calc(
    /* 中间区间（680px-1020px）生效：28px */
    28px * clamp(0, sign(100vw - 680px), 1) * clamp(0, sign(1020px - 100vw), 1) +
    /* 小于680px生效：20px */
    20px * clamp(0, sign(680px - 100vw), 1) +
    /* 大于1020px生效：40px */
    40px * clamp(0, sign(100vw - 1020px), 1)
  ),
  40px
);

原理说明 #

• sign()函数会根据传入值的正负返回1（正数）、-1（负数）或0（零），配合clamp(0, ..., 1)可以将结果转为0或1，起到“开关”的作用。
• 当视口宽度小于680px时，只有20px对应的“开关”为1，其余为0，最终取20px。
• 当视口宽度在680px-1020px之间时，只有28px对应的两个“开关”均为1，其余为0，最终取28px。
• 当视口宽度大于1020px时，只有40px对应的“开关”为1，其余为0，最终取40px。

这种写法无需额外媒体查询，代码精简且能精准满足需求。

内容的提问来源于stack exchange，提问作者Walrus