前端如何实现作为背景的文本随窗口大小自适应缩放

开发者阿泽

2026-9-25

解决方案

完全不需要使用JavaScript监听resize事件，纯CSS即可实现需求，性能远高于JS方案，可选两种实现方式：

方案1：动态计算拉伸比例（自适应所有窗口尺寸）

直接通过CSS calc() 函数动态计算scaleY的数值，浏览器会自动响应窗口尺寸变化，无额外性能开销：

.bg_home {
  color: var(--main-bg-color);
  position: absolute;
  /* 原固定top的350px建议替换为视窗单位，比如结合你棕色区域的位置调整为以下示例，按需修改系数即可 */
  top: calc(35vh + 20px);
  left: 10px;
  -webkit-text-stroke: 1px var(--text-stoke);
  z-index: -1;
  /* 0.0014为调试系数，你可以根据需要覆盖的棕色区域高度调整这个数值，直到符合预期 */
  transform: scale(1, calc(0.0014 * 100vw));
  font-size: 42vw;
  will-change: transform;
  user-select: none;
}

如果需要结合窗口高度调整，也可以把calc内的逻辑改成和vh相关的计算，比如：
transform: scale(1, calc(40vh / (42vw * 0.72)));
其中0.72是你使用的字体下HOME四个字母的默认宽高比，可根据实际字体调整。

方案2：媒体查询固定断点（和你原有JS逻辑一致）

如果不需要全尺寸自适应，只需要你设定的几个宽度断点，直接用CSS媒体查询实现即可，替换你原有JS的逻辑：

.bg_home {
  color: var(--main-bg-color);
  position: absolute;
  top: 350px;
  left: 10px;
  -webkit-text-stroke: 1px var(--text-stoke);
  z-index: -1;
  font-size: 42vw;
  will-change: transform;
  user-select: none;
}

/* 窗口宽度小于等于1100px */
@media (max-width: 1100px) {
  .bg_home {
    transform: scale(1, 1.9999999);
  }
}
/* 窗口宽度1101px到1300px区间 */
@media (min-width: 1101px) and (max-width: 1300px) {
  .bg_home {
    transform: scale(1, 1.9);
  }
}
/* 窗口宽度大于1300px */
@media (min-width: 1301px) {
  .bg_home {
    transform: scale(1, 1.2);
  }
}