响应式打字效果：font-size: calc(45px + 2vw) 不生效求助

一、字体响应式不生效的原因及修复 #

你写的font-size: calc(45px + 2vw)语法是正确的，之所以看起来没生效，大概率是两个原因：

1. 旧浏览器不支持calc()，缺少兜底样式；
2. 容器的max-width:90%搭配white-space:nowrap，字体放大后文本超出容器触发横向滚动，视觉上造成字体没变化的错觉。

修改字体样式并调整容器宽度逻辑：

.typeit {
  /* 兜底样式，兼容不支持calc的旧浏览器 */
  font-size: 45px;
  /* 响应式字体，vw随视口宽度动态调整 */
  font-size: calc(45px + 2vw);
  font-weight: bold;
  padding: 2vh 4vw;
  border-right: 2px solid #50bdb8;
  white-space: nowrap;
  text-align: center;
  margin: 0 auto;
  /* 让容器宽度自适应文本长度 */
  width: fit-content;
  /* 限制最大宽度不超过视口90%，避免文本过宽 */
  max-width: 90vw;
  overflow-x: auto;
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

二、打字动画适配响应式文本 #

原来的@keyframes typeit中to {width:100%}是基于容器宽度，当容器宽度自适应文本后，改成fit-content能让动画更贴合文本实际长度，避免动画结束后文本未完全显示：

@keyframes typeit {  
  from { width: 0 }
  to { width: fit-content }
}

@keyframes right-border {
  from, to { border-color: transparent }
  50% { border-color: #50bdb8; }
}

三、小屏幕优化 #

如果窗口缩小时希望字体更小更适配，可调整calc的参数，比如降低基础字号和vw比例：

font-size: 30px;
font-size: calc(30px + 1.5vw);

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