能否根据浏览器宽度拉伸/收缩状态切换元素class，优先CSS实现

纯CSS无法实现该需求：CSS仅能捕捉视口的静态宽度状态，不支持检测宽度变化的方向，因此必须通过JavaScript实现，以下是可直接使用的最简实现：

核心逻辑 #

记录上一次触发resize时的视口宽度，每次视口宽度变化时对比当前宽度与历史宽度，判断变化方向后为目标元素切换对应class，同时添加防抖逻辑避免性能损耗。

代码示例 #

<!-- 目标元素示例 -->
<div id="target">需要切换class的元素</div>

// 初始化记录页面加载时的视口宽度
let lastViewportWidth = window.innerWidth
// 替换为你要操作的目标元素选择器
const targetElement = document.querySelector('#target')

// 防抖函数，避免resize事件频繁触发，延迟时间可按需调整
const debounce = (func, delay = 100) => {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => func.apply(this, args), delay)
  }
}

// 视口变化处理函数
const handleViewportResize = () => {
  const currentWidth = window.innerWidth
  // 宽度无变化直接跳过
  if (currentWidth === lastViewportWidth) return

  if (currentWidth < lastViewportWidth) {
    // 视口收缩：添加narrow类，移除widen类
    targetElement.classList.remove('widen')
    targetElement.classList.add('narrow')
  } else {
    // 视口拉伸：添加widen类，移除narrow类
    targetElement.classList.remove('narrow')
    targetElement.classList.add('widen')
  }

  // 更新历史宽度记录
  lastViewportWidth = currentWidth
}

// 绑定resize事件
window.addEventListener('resize', debounce(handleViewportResize))

// 可选：页面加载完成后触发一次，给元素添加初始状态class
window.addEventListener('DOMContentLoaded', handleViewportResize)

补充说明 #

如果需要在宽度不变的场景下保留上次的class状态，以上代码已经自动支持，无需额外修改；如果需要在页面滚动等其他场景也触发状态判断，可自行将handleViewportResize函数绑定到对应的事件上。

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