如何让jQuery UI进度条响应设置值并适配不同屏幕尺寸？

问题核心：jQuery UI进度条初始化时，会给内部的.ui-widget-header元素设置固定像素宽度。当浏览器窗口缩小、容器宽度变化时，这个固定宽度不会自动调整，导致填充比例看起来变成了100%。

以下是可行的解决方案：

方案1：窗口 resize 时销毁重建进度条 #

这是最直接的方式，利用jQuery UI的API重新初始化进度条，让它根据新的容器宽度计算正确的填充比例：

<div id="progressbar"></div>

#progressbar {
  width: 100%;
  max-width: 800px; /* 可选，限制进度条最大宽度 */
}

/* 保留你的.ui-widget-header样式，但不要设置固定width */
.ui-widget-header {
  background-color: #4CAF50;
}

// 初始化进度条
const $progressbar = $("#progressbar").progressbar({ value: 37 });

// 监听窗口 resize 事件，加防抖避免频繁触发
let resizeTimer;
$(window).on("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    const currentValue = $progressbar.progressbar("value");
    // 销毁后重新初始化，让进度条适配新宽度
    $progressbar.progressbar("destroy").progressbar({ value: currentValue });
  }, 250);
});

方案2：直接更新内部进度条的百分比宽度 #

不需要销毁重建，直接计算并设置.ui-widget-header的百分比宽度，性能更优：

const $progressbar = $("#progressbar").progressbar({ value: 37 });
const $progressFill = $progressbar.find(".ui-widget-header");

// 定义更新进度宽度的函数
function updateProgressFill() {
  const currentValue = $progressbar.progressbar("value") || 0;
  $progressFill.css("width", `${currentValue}%`);
}

// 初始化时执行一次
updateProgressFill();

// 窗口 resize 时触发更新
let resizeTimer;
$(window).on("resize", () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updateProgressFill, 250);
});

为什么之前的方法无效？ #

你尝试的width:100%和包裹div只是设置了容器的自适应宽度，但内部的填充元素是初始化时生成的固定像素宽度。当容器变窄，这个固定像素宽度占容器的比例会被撑大，视觉上就变成了100%填充。必须在宽度变化时重新计算填充元素的百分比宽度，才能保持正确的进度比例。

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