如何根据屏幕大小从离子菜单中动态改变边框？

@media (max-width: 768px) {
  /* 在屏幕宽度小于等于768px时应用的样式 */
  .menu {
    border: 1px solid red;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  /* 在屏幕宽度大于等于769px且小于等于1024px时应用的样式 */
  .menu {
    border: 2px solid blue;
  }
}

@media (min-width: 1025px) {
  /* 在屏幕宽度大于等于1025px时应用的样式 */
  .menu {
    border: 3px solid green;
  }
}

window.addEventListener('resize', function() {
  var menu = document.querySelector('.menu');
  var width = window.innerWidth;

  if (width <= 768) {
    menu.style.border = '1px solid red';
  } else if (width <= 1024) {
    menu.style.border = '2px solid blue';
  } else {
    menu.style.border = '3px solid green';
  }
});