浏览器窗口Resize时更新offsetWidth值的技术实现问询

问题分析 #

你的代码已有初步断点判断逻辑，但存在两个核心问题：

1. 窗口resize时仅更新paletteWidth变量，未重新计算并应用.swatch的宽度；
2. 仅在初始化时执行一次断点判断，窗口尺寸跨断点变化时无法自动适配。

解决方案 #

将宽度计算逻辑封装为可复用函数，结合matchMedia监听断点变化，搭配resize事件实现全场景响应式适配：

优化后的JavaScript代码

// 获取DOM元素
const palette = document.querySelector('.palette');
const swatches = document.querySelectorAll('.swatch');

// 定义宽度计算逻辑
function updateSwatchWidth() {
  const paletteWidth = palette.offsetWidth;
  const isDesktop = window.matchMedia("(min-width: 700px)").matches;
  
  // 根据断点计算单块色块宽度
  const swatchWidth = isDesktop 
    ? (paletteWidth - 40) / 5 
    : (paletteWidth - 30) / 4;
  
  // 批量更新所有色块宽度
  swatches.forEach(swatch => {
    swatch.style.width = `${swatchWidth}px`;
  });
}

// 初始化执行一次
updateSwatchWidth();

// 监听窗口resize事件，添加防抖优化（避免频繁触发）
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updateSwatchWidth, 100);
});

// 监听断点变化（补充resize监听的覆盖场景）
window.matchMedia("(min-width: 700px)").addListener(updateSwatchWidth);

CSS调整建议

原CSS中.palette和.palette__inner都设置了overflow-x: scroll，会导致双重滚动容器，建议移除.palette的滚动属性：

.palette {
  display: flex;
  /* 移除重复的滚动设置 */
  /* overflow-x: scroll; */
}

关键改动说明 #

• 封装复用函数：将宽度计算逻辑抽离为updateSwatchWidth，初始化和事件触发时均可调用，避免代码重复；
• Resize防抖：添加定时器防抖，减少窗口拖动时的计算频率，提升性能；
• 断点监听：通过matchMedia.addListener监听断点切换，确保跨断点时自动更新宽度；
• 简化逻辑：用三元表达式简化断点判断分支，提升代码可读性。

额外优化思路 #

若希望减少JS依赖，可尝试纯CSS方案（需确保色块容器宽度与.palette一致）：

@media (min-width: 700px) {
  .swatch {
    width: calc((100% - 40px) / 5);
  }
}
@media (max-width: 699px) {
  .swatch {
    width: calc((100% - 30px) / 4);
  }
}

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