容器相对响应式字体大小问题排查：缩小屏幕时字体固定为1em

首先咱们得拆解可能导致这个问题的几个常见原因，结合你提到的脚本代码问题，逐个排查：

1. 容器尺寸获取出错 #

如果脚本没正确拿到图片容器的实际宽高，很容易触发默认的1em逻辑：

• 比如容器是默认inline元素，用offsetWidth/offsetHeight会拿到不准确的值
• 图片还没加载完成就执行了脚本，此时容器宽高是0或占位值，直接 fallback 到1em
• 错误获取了父元素而非目标图片容器的尺寸

举个典型的错误示例：

// 错把body当成图片容器，尺寸完全不对
const container = document.body;
const containerWidth = container.offsetWidth;

2. 计算逻辑存在缺陷 #

计算逻辑里的判断或公式出错，会直接返回1em：

• 比如容器宽高为0时直接返回1em，但没处理后续图片加载/窗口缩放的重新计算
• 比例设置错误，导致计算结果异常，最终被浏览器解析或脚本逻辑强制设为1em

错误示例：

function calculateFontSize(container) {
  const width = container.offsetWidth;
  const height = container.offsetHeight;
  // 一旦宽高为0就返回1em，但没后续更新逻辑
  if (!width || !height) return '1em';
  // 比例设置过小，可能被浏览器最小字体限制覆盖成1em
  const fontSize = (width * 0.001) + 'px';
  return fontSize;
}

3. 未监听必要的触发事件 #

如果脚本只在页面初始化时执行一次，屏幕缩小或图片加载完成后不会重新计算：

• 没监听窗口resize事件，屏幕缩小时无法触发字体大小更新
• 没监听图片load事件，图片加载完成后容器尺寸变化但脚本没响应

正确的做法是把计算逻辑封装成函数，绑定到关键事件上：

function updateFontSize() {
  const imgContainer = document.querySelector('.img-container');
  const targetText = document.querySelector('.responsive-text');
  if (!imgContainer || !targetText) return;
  
  // 这里可以根据容器宽高自定义计算规则，比如取宽度的5%
  const fontSize = `${imgContainer.offsetWidth * 0.05}px`;
  targetText.style.fontSize = fontSize;
}

// 初始化执行一次
updateFontSize();
// 监听窗口缩放
window.addEventListener('resize', updateFontSize);
// 监听图片加载（如果容器尺寸由图片决定）
document.querySelector('.img-container img').addEventListener('load', updateFontSize);

4. CSS样式优先级覆盖 #

脚本设置的字体大小可能被更高优先级的CSS规则覆盖：
比如CSS里写了：

.responsive-text {
  font-size: 1em !important;
}

这种带!important的规则会直接覆盖脚本设置的inline样式。你可以打开浏览器开发者工具，查看元素的计算样式，确认字体大小的最终来源。

快速排查小技巧 #

• 在脚本计算逻辑处加console.log，打印容器宽高和计算出的字体大小，看是否符合预期
• 确认图片加载完成后再执行脚本，或者给图片设置固定宽高占位
• 检查CSS中有没有强制锁定字体大小的规则

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