嘿，我看你在做响应式头部切换的时候遇到了两个小麻烦：屏幕从小尺寸切回大尺寸时布局没恢复，还有IDE提示addListener那行有问题，我来帮你一步步解决～

第一个问题：屏幕变大时切换失效的原因 #

先看你代码里的else块，这里逻辑和写法都有问题：

}else {
desktopScreen.classList.add(".d-none")
desktopScreen.classList.remove(".d-none")
}

这里犯了两个小错误：

• 操作类名的时候不需要加.，classList.add/remove直接写类名就行，比如d-none而不是.d-none
• 逻辑完全搞反了：当屏幕大于700px时，应该显示桌面端头部，隐藏移动端头部，但你现在给desktop加了又立刻移除d-none，等于没做任何有效操作，还完全没处理mobileScreen的状态

另外还要注意：你原来的document.querySelector('.desktopScreen ')后面多了个空格，这会导致获取不到元素，这个细节很容易坑人！

第二个问题：addListener报错的原因 #

matchMedia的addListener方法已经被废弃了，现在标准用法是用addEventListener监听change事件，IDE报错就是因为这个方法过时啦。

修正后的完整代码 #

我把你的代码改好了，直接用就行：

// 定义媒体查询条件
const screenMobileSize = window.matchMedia("(max-width: 700px)");
// 获取两个header元素（去掉了desktopSelector后面的空格）
const mobileScreen = document.querySelector('.mobileScreen');
const desktopScreen = document.querySelector('.desktopScreen');

function handleScreenSizeChange(screenMedia) {
  if (screenMedia.matches) {
    // 屏幕<=700px：显示移动端头部，隐藏桌面端
    mobileScreen.classList.remove('d-none');
    desktopScreen.classList.add('d-none');
  } else {
    // 屏幕>700px：显示桌面端头部，隐藏移动端
    desktopScreen.classList.remove('d-none');
    mobileScreen.classList.add('d-none');
  }
}

// 页面加载时先执行一次，确保初始状态正确
handleScreenSizeChange(screenMobileSize);
// 用标准的事件监听方式替代过时的addListener
screenMobileSize.addEventListener('change', handleScreenSizeChange);

额外小建议 #

如果只是简单的显示隐藏，其实用CSS媒体查询会更简洁，不需要写JS：

@media (max-width: 700px) {
  .desktopScreen { display: none !important; }
  .mobileScreen { display: flex !important; }
}
@media (min-width: 701px) {
  .desktopScreen { display: flex !important; }
  .mobileScreen { display: none !important; }
}

不过如果后面还要加移动端菜单展开这类交互逻辑，那用JS还是很有必要的～

备注：内容来源于stack exchange，提问作者shima