如何仅用CSS实现可调整大小的HTML Div内字体随容器缩放？

可以仅通过CSS实现，以下是两种可行方案：

方案一：CSS容器查询（推荐） #

这是最贴合需求的方案，完全基于目标div的尺寸而非页面视口来调整字体大小，目前主流浏览器已支持。

1. 先给可调整大小的div设置容器查询上下文：

.resizable-div {
  container-type: inline-size; /* 基于容器的内联宽度建立查询上下文 */
  resize: both;
  overflow: auto; /* 必须设置overflow才能启用resize功能 */
  border: 1px solid #ddd;
  padding: 8px;
}

2. 使用容器查询单位cqi（容器内联尺寸的1%）配合clamp()实现平滑缩放：

@container (max-width: 400px) {
  .resizable-div p {
    font-size: clamp(12px, 4cqi, 16px);
  }
}

@container (min-width: 400px) {
  .resizable-div p {
    font-size: clamp(16px, 3cqi, 24px);
  }
}

cqi单位会随div的宽度变化自动调整，完美匹配容器尺寸缩放需求。

方案二：兼容旧浏览器的备选方案 #

如果需要兼容不支持容器查询的浏览器，可以用ch单位（基于当前字体的字符宽度）结合clamp()，虽然适配精度稍弱，但无需额外特性：

.resizable-div p {
  font-size: clamp(12px, 2.5ch, 24px);
  width: 100%;
}

你之前尝试的vw单位基于页面视口宽度，自然无法匹配容器尺寸变化，上述方案均围绕容器本身尺寸设计，完全符合需求。

内容的提问来源于stack exchange，提问作者Ane Luisy Grizotti