JS设置内联display后，响应式菜单切屏时无法匹配媒体查询样式

JavaScript直接修改元素内联样式navBar.style.display的优先级，远高于媒体查询内写的所有CSS规则。只要元素身上残留了JS写入的内联display值，不管窗口尺寸如何变化，预设的媒体查询样式都会被直接覆盖，完全失效。
另外原有CSS的媒体查询区间存在空隙：468px到768px之间没有给.myLinks设置默认样式，本身也会导致样式断层。

• 放弃直接通过JS写内联display控制菜单显隐，改用自定义状态类标记菜单开合状态，把显隐规则统一交给CSS媒体查询控制，从根源上避免内联样式优先级过高的问题
• 调整后的JS逻辑（保留原有汉堡按钮的切换效果，去掉内联样式赋值，补全变量声明）：

  const burgerArray = document.querySelectorAll(".barra");
  const navBar = document.getElementById('myLinks')
  
  function buttonChange() {
    // 用forEach替代无声明的for循环，避免全局变量污染
    burgerArray.forEach(item => item.classList.toggle('change'))
    // 仅切换导航的状态类，不写入内联样式
    navBar.classList.toggle('nav-open')
  }
  
  // 增加窗口尺寸变化的兜底清理逻辑，避免交互状态残留
  window.addEventListener('resize', () => {
    // 到达大屏断点时，清掉所有小屏交互留下的状态标记
    if (window.innerWidth >= 768) {
      navBar.classList.remove('nav-open')
      burgerArray.forEach(item => item.classList.remove('change'))
    }
  })
  

• 调整后的CSS规则，补全之前缺失的媒体查询区间：

  /* 小屏区间默认隐藏导航菜单，带nav-open类时才展开 */
  @media (max-width: 767px) {
    .myLinks {
      display: none;
    }
    .myLinks.nav-open {
      display: block;
    }
  }
  
  /* 大屏区间固定展示导航，和JS交互的状态类完全解耦 */
  @media only screen and (min-width: 768px) {
    .menudo {
      display: flex;
      justify-content: space-between;
    }
    #burgers {
      display: none;
    }
    .myLinks {
      display: block;
    }
  }
  

所有菜单显隐规则都绑定在CSS类上，媒体查询触发时浏览器会自动应用对应样式，不会被残留的内联样式干扰。窗口尺寸变化的兜底逻辑会在到达大屏断点时，主动清空小屏交互留下的所有状态标记，完全避免样式锁死的问题。

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