在 HTML 中让文字大小跟随容器尺寸自动调整，可以通过以下几种方法实现：

---

方法一：使用 vw 视窗单位（视窗相关）

.text {
  font-size: 5vw; /* 文字宽度为视窗宽度的 5% */
}

优点：简单直接
缺点：基于视窗（而非容器）宽度，需容器本身与视窗关联

---

方法二：CSS容器查询（最精准方案）

<div class="container">
  <p class="text">自适应文字</p>
</div>

<style>
.container {
  container-type: inline-size; /* 定义容器 */
}

@container (width > 600px) {
  .text { font-size: 24px; }
}
@container (width <= 600px) {
  .text { font-size: 16px; }
}
</style>

优点：精准响应容器尺寸
缺点：需较新浏览器支持（Chrome 105+）

---

方法三：JavaScript 动态计算

<div class="container">
  <p class="text">自适应文字</p>
</div>

<script>
const container = document.querySelector('.container');
const text = document.querySelector('.text');

// 动态调整字体大小
function adjustFontSize() {
  const containerWidth = container.offsetWidth;
  text.style.fontSize = `${containerWidth / 20}px`; // 按容器宽度比例调整
}

// 初始化及监听窗口变化
adjustFontSize();
window.addEventListener('resize', adjustFontSize);

// 可选：使用 ResizeObserver 监听容器变化
const observer = new ResizeObserver(adjustFontSize);
observer.observe(container);
</script>

优点：完全动态控制
缺点：需编写脚本，性能略低

---

方法四：流体排版（clamp() 函数）

.text {
  font-size: clamp(16px, 3vw, 24px); /* 最小值 16px，理想值 3vw，最大值 24px */
}

优点：平滑过渡且可控范围
缺点：仍依赖视窗单位

---

方法选择建议：

1. 精准容器响应 → CSS容器查询
2. 兼容旧浏览器 → JavaScript
3. 视窗关联布局 → vw 或 clamp()
4. 避免文字溢出 → 可结合 text-wrap: balance（实验性特性）

根据实际需求选择最适合的方案！

在 CSS 中，除了基于视窗宽度的 vw 单位，还有专门针对视窗高度的单位：
vh（Viewport Height） —— 表示视窗高度的百分比（1vh = 1% 视窗高度）

---

基础用法

.text {
  font-size: 5vh; /* 文字大小为视窗高度的 5% */
}

---

其他视窗相关单位

单位	含义	示例场景
vh	视窗高度百分比（1vh = 1%高度）	全屏布局、垂直居中文本
vmin	视窗宽高中 较小值 的 1%	方形元素（如手机竖屏适配）
vmax	视窗宽高中 较大值 的 1%	横向大屏显示（如投影仪场景）

---

实战示例

/* 结合视窗宽高，实现正方形内的自适应文字 */
.box {
  width: 50vmin;   /* 取视窗宽高的较小值，保证正方形 */
  height: 50vmin;
  font-size: 5vmin; /* 文字随正方形缩放 */
}

/* 限制极端情况（如超宽/超高屏幕）*/
.title {
  font-size: clamp(20px, 8vh, 100px); 
  /* 最小 20px，理想值 8vh，最大 100px */
}

---

⚠️ 移动端注意事项

移动端浏览器（如 Safari/Chrome）的 vh 单位默认不包含地址栏高度，可能导致高度计算偏差。
可通过以下方案修复：

/* 使用新的 CSS 单位（推荐）*/
.text {
  height: 100dvh; /* dvh = 动态视窗高度（包含地址栏变化） */
}

---

经典应用场景

1. 全屏欢迎页标题

   .hero-title {
     font-size: 10vh; /* 大标题高度占比固定 */
   }
   

2. 垂直居中文本

   .centered-text {
     height: 100vh;
     line-height: 100vh; /* 行高 = 视窗高度（单行垂直居中） */
   }
   

如果希望文字同时响应容器尺寸，可结合 clamp() 函数和容器查询（如原回答方法二）实现更精准控制。