如何根据页面大小调整按钮图标的大小

/* 默认按钮图标样式 */
.icon {
  font-size: 16px;
}

/* 在页面宽度小于768px时，按钮图标变为更小的尺寸 */
@media (max-width: 767px) {
  .icon {
    font-size: 12px;
  }
}

function resizeIcon() {
  var pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var icon = document.getElementById("myButtonIcon"); // 替换为按钮图标元素的ID

  if (pageWidth < 768) {
    icon.style.fontSize = "12px";
  } else {
    icon.style.fontSize = "16px";
  }
}

// 监听窗口大小变化
window.addEventListener("resize", resizeIcon);