如何检测容器高度达到70vh阈值时动态获取其对应宽度？

方案1：通用动态监听方案（无前置依赖，适配所有场景） #

这个方案不需要提前知道容器高度和宽度的映射规则，不管是CSS固定宽高比、内部内容撑高、JS动态设置高度的场景都能兼容，同时覆盖视口宽高动态变化、页面初始化就达到阈值的场景。
实现逻辑：

• 先将vh阈值转换为实时像素值，70vh对应的实际像素会随视口高度变化，每次检测都要重新计算
• 同时监听两类尺寸变化：一是容器本身的宽高变动，二是视口的尺寸变动
• 加状态标记避免重复触发，只有从「未达到阈值」切换到「达到/超过阈值」的临界瞬间，才捕获当前容器宽度
  参考实现代码：

// 可自定义的阈值，单位vh
const THRESHOLD_VH = 70;
const container = document.querySelector('#target-container');
// 标记当前是否已经处于超过阈值的状态，避免重复捕获
let hasReachThreshold = false;
let criticalWidth = null;

// 实时计算当前阈值对应的像素高度
const getCurrentThreshold = () => (THRESHOLD_VH / 100) * window.innerHeight;

const checkCriticalState = () => {
  const thresholdHeight = getCurrentThreshold();
  const currentHeight = container.offsetHeight;
  const currentWidth = container.offsetWidth;

  // 从未达标到刚达标的临界状态，记录宽度
  if (!hasReachThreshold && currentHeight >= thresholdHeight) {
    hasReachThreshold = true;
    criticalWidth = currentWidth;
    // 此处编写拿到临界宽度后的业务逻辑
    console.log('临界状态容器宽度：', criticalWidth);
  }

  // 从达标状态回落到阈值以下，重置标记，下次重新达标时可再次捕获
  if (hasReachThreshold && currentHeight < thresholdHeight) {
    hasReachThreshold = false;
  }
}

// 监听容器所有尺寸变动（覆盖非视口变化导致的容器尺寸调整，比如侧边栏折叠、父布局变化）
const resizeObserver = new ResizeObserver(checkCriticalState);
resizeObserver.observe(container);
// 监听视口尺寸变动（影响vh阈值的实际像素值、容器宽度）
window.addEventListener('resize', checkCriticalState);
// 页面初始化时执行一次检测，覆盖加载完成就已经达到阈值的场景
checkCriticalState();

如果容器高度变化有CSS过渡动画，可以给判断条件加1-2px的容差，比如currentHeight >= thresholdHeight - 1，减少边界值抖动导致的重复触发。

方案2：已知宽高映射关系时的直接计算公式 #

如果明确知道容器高度和宽度的固定计算规则，可以直接通过公式计算临界宽度，不需要持续监听，性能更高。
常见场景的计算逻辑：

• 容器通过CSSaspect-ratio固定宽高比，比如aspect-ratio: w/h（即宽高比为w比h）：
  临界条件为容器高度 = THRESHOLD_VH / 100 * 视口高度，代入宽高比公式推导得：
  临界宽度 = (THRESHOLD_VH / 100 * window.innerHeight) * (w / h)
  比如16:9的容器，70vh阈值下临界宽度为0.7 * window.innerHeight * 16 / 9
• 容器高度和宽度为固定线性关系，比如高度 = a * 宽度 + b（a、b为固定系数，比如固定padding、固定border的场景）：
  代入临界条件解方程得：
  临界宽度 = (THRESHOLD_VH / 100 * window.innerHeight - b) / a
• 容器由固定宽高比的内容（比如图片、视频）撑开：本质和固定aspect-ratio的场景一致，代入内容的宽高比计算即可。

注意：如果容器在不同宽度下有响应式布局规则（比如断点调整padding、修改排版列数），宽高映射关系不是固定线性的，公式计算会有偏差，优先用方案1的动态监听逻辑。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung