JS监听window.resize 屏宽<520px时蓝色方块匹配绿色方块宽度

原有代码问题 #

• 宽度判断API使用错误：screen.width返回的是设备屏幕的固定物理宽度，调整浏览器窗口尺寸时该值不会发生变化，无法正确判断当前视口宽度，需替换为window.innerWidth获取实时视口宽度
• 缺少宽度重置逻辑：当窗口宽度回升到520px及以上时，没有将蓝色方块宽度还原为初始的50px，会导致蓝块始终保持和绿块同宽
• 存在性能损耗：resize事件触发频率极高（每秒可触发数十次），每次触发都重新查询DOM、执行计算，容易造成页面卡顿
• 缺少初始化校验：页面首次加载时如果视口宽度已经小于520px，逻辑不会触发，蓝块仍保持初始50px宽度，不符合预期

修复后的JS实现 #

// 提前缓存DOM元素，避免每次事件触发都重复查询
const greenBox = document.querySelector('.box');
const blueBox = document.querySelector('.changing__width__element');
let resizeTimer = null;

function adjustBlueBoxWidth() {
  if (window.innerWidth < 520) {
    blueBox.style.width = `${greenBox.clientWidth}px`;
  } else {
    blueBox.style.width = '50px';
  }
}

window.addEventListener('resize', () => {
  // 防抖处理，窗口停止调整16ms后执行逻辑，匹配屏幕60hz刷新频率，减少不必要计算
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(adjustBlueBoxWidth, 16);
}, true);

// 页面加载完成后先执行一次逻辑，适配初始视口宽度
adjustBlueBoxWidth();

原有CSS和HTML代码可以直接使用，只需要给body补个默认margin重置，避免默认边距影响宽度计算：

body,html{
  width: 100%;
  height: 100%;
  margin: 0; /* 清除浏览器默认body边距 */
}

.box{
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  background: lime;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.changing__width__element{
  width: 50px;
  height: 50px;
  background: blue;
  position: relative;
}

<body>
  <div class="box">
    <div class="changing__width__element"></div>
  </div>
</body>

更优的纯CSS实现 #

如果不需要兼容IE10及以下版本，完全不需要写JS，直接用媒体查询就能实现，性能更好、逻辑更简单：

/* 原有CSS保持不变，新增下面的媒体查询即可 */
@media (max-width: 519px) {
  .changing__width__element {
    width: 100%;
  }
}

蓝色方块本身是绿色flex容器的直接子元素，给它设置width: 100%就会自动撑满父元素（绿色方块）的宽度，完全不需要JS监听窗口变化。

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