如何使用JS在不同屏幕大小的粘性标题中更改logo大小？

<div class="sticky-header">
  <img id="logo" src="logo.png" alt="Logo">
  <h1>Title</h1>
</div>

<style>
.sticky-header {
  position: sticky;
  top: 0;
  background-color: #f1f1f1;
  padding: 10px;
}

#logo {
  max-width: 100%;
  height: auto;
}
</style>

window.addEventListener('resize', function() {
  var logo = document.getElementById('logo');
  var windowWidth = window.innerWidth;

  if (windowWidth < 768) {
    // 在小屏幕上更改logo大小
    logo.style.width = '100px';
  } else if (windowWidth >= 768 && windowWidth < 1024) {
    // 在中等屏幕上更改logo大小
    logo.style.width = '150px';
  } else {
    // 在大屏幕上更改logo大小
    logo.style.width = '200px';
  }
});