能否结合@media查询实现JS动画滑动门的响应式宽度适配？

完全可以实现，不需要大幅修改现有代码，仅需调整少量CSS和JS代码即可，具体修改方案如下：

实现逻辑 #

通过CSS原生媒体查询做响应式判断，将滑动动画从JS驱动改为CSS transition驱动，仅修改样式定义和极少量JS逻辑，原有页面结构、交互逻辑完全保留。

CSS修改 #

在原有CSS末尾新增以下代码即可：

/* 开启CSS过渡动画，替代原JS animate效果，动画时长可自行调整 */
#left-door {
  transition: right 0.3s ease;
}
/* 小屏及默认状态下打开时的位置 */
#left-door.isOpen {
  right: 0;
}

/* 屏幕宽度≥1024px时的适配样式 */
@media (min-width: 1024px) {
  #left-door {
    /* 宽度为屏幕宽度的33% */
    width: 33vw;
    /* 关闭时露出60px触发区域，和小屏交互体验保持一致 */
    right: calc(-33vw + 60px);
  }
  /* 适配滑动门动态宽度，避免内部内容溢出 */
  #left-door p2 {
    width: calc(100% - 70px);
  }
}

JS修改 #

将原有JS代码替换为以下代码，仅保留类切换逻辑，动画交给CSS处理即可：

$("#left-door").click(function(){
  $(this).toggleClass("isOpen");
});

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