求助：如何修复文本动画的移动端响应式问题？现有方案无效

问题概述 #

开发的字符拆分式文本动画在桌面、平板端显示正常，但移动端无法实现预期响应式效果，使用transform: scale()仅能缩小字体，布局仍无法适配小屏。

原代码核心问题分析 #

1. 重复缩放叠加：媒体查询中同时对.text-animation_001和.sentence应用缩放，导致容器层级缩放叠加，布局偏移
2. 固定单位限制：字体大小、max-width均使用固定px值，无法随视口宽度自适应
3. 脚本样式覆盖：动画重置逻辑中硬编码固定字体大小，覆盖了媒体查询的自适应设置
4. 无效样式：背景色#000ffff为无效十六进制值，浏览器无法正确解析

修复方案与完整代码 #

关键修改点 #

• 字体大小改用vw单位，实现基于视口宽度的自适应缩放
• 简化媒体查询，仅对最外层容器应用缩放，避免层级冲突
• 移除span元素的固定max-width限制，改为自适应宽度
• 修正脚本中的字体大小重置逻辑，继承父容器的相对单位样式
• 修复无效背景色值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
    body {
      margin: 0;
    }

    .text-animation_001 {
      font-family: Montserrat, sans-serif;
      font-weight: 600;
      padding: 10px;
      font-size: 5vw; /* 使用vw单位实现自适应 */
      background-color: #00ffff; /* 修复无效颜色值 */
      width: 100%;
      overflow: hidden; /* 避免溢出 */
    }

    .text-animation_001 .sentence {
      display: flex;
      flex-direction: row;
      justify-content: left;
      align-items: flex-end;
    }

    .text-animation_001 .sentence span {
      opacity: 0;
      transition: all 0.1s ease-in;
      transform: translateY(-20px);
      color: #dadada;
      /* 移除固定max-width，改为自适应 */
    }

    .text-animation_001 .sentence span:nth-child(15),
    .text-animation_001 .sentence span:nth-child(22),
    .text-animation_001 .sentence span:nth-child(29) {
      color: #d8ae5a;
    }
    .text-animation_001 .sentence span:nth-child(14) {
      font-size: 6.25vw; /* 对应原50px，基于5vw的1.25倍 */
    }
    .text-animation_001 .sentence span:nth-child(7),
    .text-animation_001 .sentence span:nth-child(10),
    .text-animation_001 .sentence span:nth-child(14),
    .text-animation_001 .sentence span:nth-child(18),
    .text-animation_001 .sentence span:nth-child(27) {
      letter-spacing: 0.8vw; /* 相对单位适配 */
    }

    /* 简化媒体查询，仅作用于最外层容器 */
    @media screen and (max-width: 768px) {
      .text-animation_001 {
        transform: scale(0.9);
        transform-origin: left center;
      }
    }

    @media screen and (max-width: 600px) {
      .text-animation_001 {
        transform: scale(0.8);
        transform-origin: left center;
      }
    }
    @media screen and (max-width: 480px) {
      .text-animation_001 {
        transform: scale(0.7);
        transform-origin: left center;
      }
    }
  </style>
</head>
<body>
  <div class="main">
    <div class="text-animation_001">
      <div class="sentence"></div>
    </div>
    <script>
      const animation_sentence = "Welcome to Dr.Paye AlMeeran Centre";
      const animation_letters = animation_sentence.split("");
      const animation_primaryLeters = [
        0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 22, 29,
      ];
      const animation_goldenLeters = [15, 22, 29];
      const animation_textEl = document.querySelector(
        ".text-animation_001 .sentence"
      );
      animation_letters.forEach((letter) => {
        animation_textEl.innerHTML += `<span>${letter}</span>`;
      });

      const animation_lettersEls = document.querySelectorAll(
        ".text-animation_001 .sentence span"
      );

      const animationIteration = () => {
        animation_lettersEls.forEach((letter, index) => {
          setTimeout(() => {
            letter.style.transitionDuration = "0.1s";
            letter.style.transform = `translateY(0px)`;
            letter.style.opacity = 1;
          }, index * 40);

          setTimeout(() => {
            letter.style.transitionDuration = "0.5s";
            if (!animation_primaryLeters.includes(index + 1)) {
              letter.style.opacity = 0;
              letter.style.transform = `scale(0.5) rotate(-15deg)`;
              letter.style.maxWidth = 0;
            }
            if (animation_goldenLeters.includes(index + 1)) {
              letter.style.fontSize = "6.25vw"; // 使用相对单位
            }
          }, 5000);
          setTimeout(() => {
            letter.style.transitionDuration = "0.1s";
            letter.style.opacity = 0;
          }, 10000);

          setTimeout(() => {
            letter.style.transitionDuration = "0.1s";
            letter.style.transform =
              "translateY(-20px) scale(1) rotate(0deg)";
            letter.style.maxWidth = "unset"; // 重置为自适应
            // 移除固定字体大小，继承父样式
            letter.style.fontSize = "";
          }, 10500);
        });
      };

      animationIteration();
      setInterval(animationIteration, 11000);
    </script>
  </div>
</body>
</html>

补充说明 #

• vw单位以视口宽度的1%为基准，确保字体在不同设备上自动适配
• 移除重复选择器后，缩放仅作用于最外层容器，避免布局混乱
• 脚本中重置字体大小为空，让元素继承父容器的自适应样式，确保媒体查询生效

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