如何更简便地实现HTML元素随浏览器窗口自动调整大小？

当然可以，你完全不用每次窗口 resize 时手动修改每个元素的 CSS 属性，下面给你几个更简洁高效的方案，逐步替代你当前的 JS 写法：

方案1：纯CSS原生实现（推荐） #

利用CSS的clamp()/min()/max()函数、vw/vh视窗单位、媒体查询和aspect-ratio属性，完全不需要JS就能实现你的适配逻辑，性能更优：

/* 标题字体：最小30px，基于窗口宽高动态计算 */
.headline {
  font-size: clamp(30px, calc((1vw + 1vh) * 1.333), 60px);
}

/* 控制按钮：固定5:1宽高比，最小125px×25px */
.controlButton {
  aspect-ratio: 5/1;
  min-width: 125px;
  min-height: 25px;
  font-size: clamp(13px, calc((1vw + 1vh) * 0.606), 20px);
}

/* 窗口宽高比 < 16:9（竖屏/窄屏）时，按钮宽度基于窗口宽度 */
@media (max-aspect-ratio: 16/9) {
  .controlButton {
    width: calc(100vw / 10.7);
    max-width: 100%;
  }
}

/* 窗口宽高比 ≥16:9（横屏/宽屏）时，按钮高度基于窗口高度 */
@media (min-aspect-ratio: 16/9) {
  .controlButton {
    height: calc(100vh / 31.03);
    max-height: 100%;
  }
}

/* 表格高度：窗口高度减去125px，字体最小10px */
.table {
  height: calc(100vh - 125px);
  min-height: calc(100vh - 125px);
  font-size: clamp(10px, calc((1vw + 1vh) * 0.541), 18px);
}

关键说明： #

• clamp(min, value, max)：自动在最小值和最大值之间取计算值，替代你JS里的if阈值判断
• 1vw=窗口宽度的1%，1vh=窗口高度的1%，完美对应你原来的(wWidth + wHeight)/N计算逻辑
• aspect-ratio:5/1：直接固定按钮宽高比，不用手动计算newHeight = newWidth/5
• 媒体查询aspect-ratio：精准判断窗口横竖屏状态，自动切换尺寸基准

方案2：CSS变量+极简JS（适合复杂计算场景） #

如果你的适配逻辑有更复杂的自定义公式（无法用纯CSS实现），可以用CSS变量统一管理动态值，JS只负责计算并更新变量，不用逐个修改元素CSS属性：

JS代码（优化版）： #

// 防抖函数，避免resize频繁触发计算
let resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    const wWidth = window.innerWidth;
    const wHeight = window.innerHeight;
    
    // 计算所有动态变量
    const dynamicVars = {
      '--h-font-size': `${Math.max((wWidth + wHeight)/75, 30)}px`,
      '--b-font-size': `${Math.max((wWidth + wHeight)/165, 13)}px`,
      '--t-font-size': `${Math.max((wWidth + wHeight)/184.88, 10)}px`,
      '--table-height': `${wHeight - 125}px`
    };

    // 按钮尺寸计算
    let btnWidth, btnHeight;
    if (wWidth / 1.78 < wHeight) {
      btnWidth = Math.max(wWidth / 10.7, 125);
      btnHeight = btnWidth / 5;
    } else {
      btnHeight = Math.max(wHeight / 31.03, 25);
      btnWidth = btnHeight * 5;
    }
    dynamicVars['--btn-width'] = `${btnWidth}px`;
    dynamicVars['--btn-height'] = `${btnHeight}px`;

    // 一次性更新所有CSS变量
    $(':root').css(dynamicVars);
  }, 100); // 100ms延迟，窗口调整结束后再执行
});

// 页面加载时初始化一次
$(window).resize();

CSS代码： #

.headline {
  font-size: var(--h-font-size);
}

.controlButton {
  width: var(--btn-width);
  height: var(--btn-height);
  min-width: var(--btn-width);
  min-height: var(--btn-height);
  font-size: var(--b-font-size);
}

.table {
  height: var(--table-height);
  min-height: var(--table-height);
  font-size: var(--t-font-size);
}

关键说明： #

• 用:root全局变量统一管理所有动态值，JS只需要更新一次变量集合
• 增加防抖处理，避免窗口调整时频繁执行计算，提升页面性能
• 代码结构更清晰，样式逻辑和计算逻辑分离

方案3：优化你现有JS代码（最小改动） #

如果不想改CSS，也可以优化现有JS的写法，减少重复的.css()调用：

let resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    const wWidth = window.innerWidth;
    const wHeight = window.innerHeight;
    
    // 标题字体
    const hFontSize = Math.max((wWidth + wHeight)/75, 30);
    $('.headline').css('font-size', `${hFontSize}px`);

    // 按钮尺寸和字体
    let btnWidth, btnHeight;
    if (wWidth / 1.78 < wHeight) {
      btnWidth = Math.max(wWidth / 10.7, 125);
      btnHeight = btnWidth / 5;
    } else {
      btnHeight = Math.max(wHeight / 31.03, 25);
      btnWidth = btnHeight * 5;
    }
    const bFontSize = Math.max((wWidth + wHeight)/165, 13);
    $('.controlButton').css({
      'max-width': `${btnWidth}px`,
      'max-height': `${btnHeight}px`,
      'min-width': `${btnWidth}px`,
      'min-height': `${btnHeight}px`,
      'font-size': `${bFontSize}px`
    });

    // 表格样式
    const tableHeight = wHeight - 125;
    const tFontSize = Math.max((wWidth + wHeight)/184.88, 10);
    $('.table').css({
      'max-height': `${tableHeight}px`,
      'min-height': `${tableHeight}px`,
      'font-size': `${tFontSize}px`
    });
  }, 100);
});

$(window).resize();

关键说明： #

• 把同一元素的多个CSS属性合并到一个.css()调用中，减少DOM操作次数
• 增加防抖处理，提升性能
• 变量命名更清晰，代码可读性提升

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