React+Tailwind中基于vw/vh适配文本并固定布局的问题

针对你遇到的文本间距偏移、对齐失效问题，以下是基于 React refs 和动态测量的精准解决方案：

核心实现思路 #

1. 响应式文本比例：使用 clamp() 结合 min(vw, vh) 确保文本随窗口宽高按固定比例缩放，同时限制最小/最大字号
2. 动态对齐测量：通过 React refs 获取上方文本中first里t的实时位置，以此定位下方文本的起始点
3. 固定垂直间距：测量上方文本容器高度，结合固定间距值（如2vh）设置下方文本的垂直位置

完整代码示例 #

import React, { useRef, useEffect, useState } from 'react';

const AlignedTextContainer = () => {
  const topTextRef = useRef(null);
  const tCharRef = useRef(null);
  const [layoutData, setLayoutData] = useState({
    tLeftOffset: 0,
    topTextHeight: 0,
  });

  // 防抖处理窗口 resize 事件，避免频繁重计算
  const debounce = (func, delay) => {
    let timeout;
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), delay);
    };
  };

  // 更新布局参数：t的位置、上方文本高度
  const updateLayout = () => {
    if (!topTextRef.current || !tCharRef.current) return;
    
    const parentRect = topTextRef.current.getBoundingClientRect();
    const tRect = tCharRef.current.getBoundingClientRect();
    
    setLayoutData({
      tLeftOffset: tRect.left - parentRect.left,
      topTextHeight: parentRect.height,
    });
  };

  useEffect(() => {
    updateLayout();
    const debouncedUpdate = debounce(updateLayout, 100);
    window.addEventListener('resize', debouncedUpdate);
    
    return () => window.removeEventListener('resize', debouncedUpdate);
  }, []);

  // 响应式字号：按窗口最小维度比例缩放，限制字号范围
  const responsiveFont = 'clamp(1rem, min(6vw, 6vh), 4rem)';
  // 固定垂直间距：可根据需求调整
  const fixedVerticalGap = '2vh';

  return (
    <div className="relative w-full h-screen p-8 box-border">
      {/* 上方容器：文本左对齐 */}
      <div 
        ref={topTextRef}
        className="text-left"
        style={{ fontSize: responsiveFont }}
      >
        This is the fir
        {/* 标记需要对齐的t字符，开发阶段可保留背景色便于调试 */}
        <span ref={tCharRef} className="bg-amber-200">t</span>
        st line of text
      </div>

      {/* 下方容器：文本右对齐，起始点与t对齐 */}
      <div 
        className="text-right"
        style={{
          position: 'absolute',
          top: `calc(${layoutData.topTextHeight}px + ${fixedVerticalGap})`,
          left: `${layoutData.tLeftOffset}px`,
          fontSize: responsiveFont,
        }}
      >
        Second aligned line
      </div>
    </div>
  );
};

export default AlignedTextContainer;

关键细节说明 #

• 响应式字号：clamp(1rem, min(6vw,6vh),4rem) 确保文本在不同设备上保持比例，同时避免过大/过小
• 动态定位：通过getBoundingClientRect()获取t字符相对于父容器的水平偏移量，实时更新下方文本的起始位置
• 固定间距：使用calc()结合上方文本高度与固定vh值，保证垂直间距不随窗口大小变化
• 防抖优化：窗口 resize 时添加防抖处理，减少不必要的重计算，提升性能

可选调整 #

如果需求是下方文本的右边缘与t对齐（而非起始点），只需修改下方容器的定位属性：

style={{
  position: 'absolute',
  top: `calc(${layoutData.topTextHeight}px + ${fixedVerticalGap})`,
  right: `${layoutData.tLeftOffset}px`, // 将left改为right
  fontSize: responsiveFont,
}}

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