如何让mu按钮随屏幕大小缩小？

<button id="myButton">按钮</button>

#myButton {
  width: 100px;
  height: 50px;
}

@media screen and (max-width: 768px) {
  #myButton {
    width: 80px;
    height: 40px;
  }
}

@media screen and (max-width: 480px) {
  #myButton {
    width: 60px;
    height: 30px;
  }
}

window.addEventListener('resize', function() {
  var button = document.getElementById('myButton');
  var screenWidth = window.innerWidth;

  if (screenWidth <= 768) {
    button.style.width = '80px';
    button.style.height = '40px';
  } else if (screenWidth <= 480) {
    button.style.width = '60px';
    button.style.height = '30px';
  } else {
    button.style.width = '100px';
    button.style.height = '50px';
  }
});