如何让字体大小随正方形div尺寸自适应？附代码片段

看起来你想要让正方形Div里的文字大小能跟着Div的尺寸自动调整——刚好正方形的宽高一致，不管基于哪一边适配都很方便，我给你几个实用的方案，结合你的代码片段来讲解：

方案一：纯CSS实现（推荐，更简洁易维护） #

利用CSS的clamp()函数结合相对单位，因为是正方形，我们可以取容器尺寸的比例来设置字体，同时限制最小/最大值避免极端情况：

.part {
  /* 先确保你的Div是正方形，这里以视口比例为例，你也可以换成固定宽高或父容器百分比 */
  width: 40vw;
  height: 40vw;
  /* 字体大小：最小1rem，最大3rem，中间随容器尺寸按比例变化 */
  font-size: clamp(1rem, 8vw, 3rem);
  /* 如果是基于父容器的正方形，也可以用百分比结合em：*/
  /* font-size: clamp(1em, 12%, 2.5em); */
}

因为你是用JS动态创建.part元素，提前写好这个CSS样式后，创建的元素会自动继承，不需要额外JS操作。

方案二：JavaScript动态精准控制 #

如果需要更灵活的逻辑（比如根据内容长度调整比例），可以在元素创建后或窗口 resize 时动态计算字体大小：

// 封装一个调整字体的函数
function setAdaptiveFont(elem) {
  // 正方形取宽/高都一样，这里用min兼容可能的异常情况
  const containerSize = Math.min(elem.offsetWidth, elem.offsetHeight);
  const fontSizeRatio = 0.1; // 字体设为容器尺寸的10%，可根据需求调整
  elem.style.fontSize = `${containerSize * fontSizeRatio}px`;
}

// 你的元素创建逻辑补充完整
var elem = document.createElement("div");
elem.className = "part";
elem.id = 'p'+i;
document.body.appendChild(elem); // 必须先添加到DOM才能获取尺寸
setAdaptiveFont(elem);

// 窗口大小变化时重新调整所有.part元素的字体
window.addEventListener('resize', () => {
  document.querySelectorAll('.part').forEach(item => setAdaptiveFont(item));
});

小提示：你的代码片段补全 #

注意你代码里的docume...是document的拼写错误，创建元素后一定要把它添加到DOM中，不然既无法显示也无法获取尺寸进行适配。

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