CSS如何设置font-size取值范围为7px至14px？已有calc写法无法生效求助

你当前使用的calc表达式没有边界限制，会出现视口过小时字号小于7px、视口过大时字号超过14px的问题，无法固定在你需要的取值范围内。

最优实现方案 #

主流现代浏览器都支持CSS clamp() 函数，专门用于限定属性值的范围，你可以直接把原有计算式套入clamp即可实现需求：

font-size: clamp(7px, calc(7px + (100vw - 90rem)/100), 14px);

三个参数的作用分别是：

• 第一个参数7px：最小值，最终字号不会低于该值
• 第二个动态计算值：保留你原本设置的字号随视口宽度变化的缩放逻辑
• 第三个参数14px：最大值，最终字号不会高于该值

旧浏览器兼容方案 #

如果需要兼容不支持clamp()的旧浏览器（如IE11），可以用媒体查询做边界兜底，代码示例如下：

.target-element {
  /* 中间视口区间使用你原本的动态计算逻辑 */
  font-size: calc(7px + (100vw - 90rem)/100);
}
/* 视口宽度小于等于90rem时，固定为最小值 */
@media (max-width: 90rem) {
  .target-element {
    font-size: 7px;
  }
}
/* 视口宽度大于等于计算临界点时，固定为最大值（临界点可根据你使用的根rem基准值自行调整，保证刚好是calc结果等于14px的视口宽度即可） */
@media (min-width: 133.75rem) {
  .target-element {
    font-size: 14px;
  }
}

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