实现文本自适应浏览器尺寸并添加过渡效果（解决font-size动画卡顿）

直接使用font-size: 100vw实现文本自适应容器/浏览器宽度时，过渡动画会出现明显卡顿，尤其是文本缩小阶段。核心原因是font-size的修改会触发浏览器频繁的重排与重绘，导致动画帧率下降。

替代方案：用transform: scale()实现平滑缩放 #

transform: scale()属于GPU加速属性，动画过程中仅对元素纹理进行缩放操作，不会触发大量重排重绘，能有效避免卡顿。

纯CSS实现（近似适配视口）

<button class="adaptive-btn">悬停查看自适应效果</button>

.adaptive-btn {
  font-size: 16px;
  padding: 8px 18px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center; /* 确保缩放以按钮中心为原点 */
  white-space: nowrap; /* 防止文本换行 */
}

.adaptive-btn:hover {
  /* 计算缩放比例：视口宽度 / 按钮初始宽度（根据实际初始宽度调整数值） */
  transform: scale(calc(100vw / 120px));
}

JS辅助实现精准适配（适配容器/动态宽度）

如果需要精准适配某个容器而非整个视口，可通过JS动态计算缩放比例：

<div class="btn-container">
  <button class="precision-adaptive-btn">悬停查看精准适配</button>
</div>

.btn-container {
  width: 80%;
  margin: 20px auto;
}

.precision-adaptive-btn {
  font-size: 16px;
  padding: 8px 18px;
  border: none;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  white-space: nowrap;
}

const btn = document.querySelector('.precision-adaptive-btn');
const container = document.querySelector('.btn-container');
const initialBtnWidth = btn.offsetWidth;

btn.addEventListener('mouseenter', () => {
  const containerWidth = container.offsetWidth;
  const scaleRatio = containerWidth / initialBtnWidth;
  btn.style.transform = `scale(${scaleRatio})`;
});

btn.addEventListener('mouseleave', () => {
  btn.style.transform = 'scale(1)';
});

原理说明 #

• font-size修改会触发浏览器重新计算元素布局、文本排版，属于**重排（reflow）**操作，性能开销大；
• transform: scale()仅对元素进行视觉上的几何变换，浏览器会将元素渲染为GPU纹理，动画过程中仅需操作纹理，属于**复合（composite）**操作，性能开销极低，因此动画更流畅。

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