能否基于主div宽度而非窗口宽度实现Media Query效果？

针对你需要根据主div（.content）宽度而非浏览器窗口宽度触发样式变化的需求，这里提供基于ResizeObserver的解决方案，完美替代窗口Media Query的场景：

核心方案 #

使用ResizeObserver API直接监听.content元素的尺寸变化，根据其宽度区间应用对应的CSS类，实现背景色切换、元素显隐（如汉堡菜单按钮）等效果，同时配合类管理样式，避免内联样式的混乱。

1. 重构CSS：用类统一管理视图样式 #

修改现有CSS，把原有的内联样式逻辑改为类控制，同时添加元素显隐的类：

/* 保留原有CSS代码，新增以下内容 */
/* 视图状态类 - 替代内联宽度和背景色设置 */
.content.mobile {
  width: 768px;
  border: 1px solid black;
  background-color: red;
}
.content.tablet {
  width: 1200px;
  border: 1px solid black;
  background-color: green;
}
.content.desktop {
  width: 100%;
  border: 1px solid white;
  background-color: blue;
}

/* 汉堡按钮显隐控制类 */
.header-collapse.hidden {
  display: none;
}

2. 重构JavaScript：添加ResizeObserver监听 #

替换原有的视图切换逻辑，用类控制样式，并添加元素宽度监听：

const header = document.querySelector("header");
const headerCollapse = document.querySelector(".header-collapse");
const content = document.querySelector(".content");
const screenSwitch = document.querySelectorAll(".screens li");

headerCollapse.addEventListener("click", headerCollapseF);

function headerCollapseF() {
  header.classList.toggle("header-set");
  headerCollapse.classList.toggle("header-collapse-set");
}

// 统一视图切换逻辑：通过类控制
screenSwitch[0].addEventListener("click", () => setView("mobile"));
screenSwitch[1].addEventListener("click", () => setView("tablet"));
screenSwitch[2].addEventListener("click", () => setView("desktop"));

function setView(viewType) {
  // 移除所有视图类，避免冲突
  content.classList.remove("mobile", "tablet", "desktop");
  // 添加当前视图对应的类
  content.classList.add(viewType);
}

// 初始化ResizeObserver监听.content宽度变化
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const width = entry.contentRect.width;
    // 根据宽度判断当前视图类型
    let targetView = "desktop";
    
    if (width <= 768) {
      targetView = "mobile";
      // 移动端显示汉堡按钮
      headerCollapse.classList.remove("hidden");
    } else if (width <= 1200) {
      targetView = "tablet";
      // 平板端隐藏汉堡按钮
      headerCollapse.classList.add("hidden");
    } else {
      targetView = "desktop";
      // 桌面端隐藏汉堡按钮
      headerCollapse.classList.add("hidden");
    }

    // 同步更新视图类，保持按钮切换和宽度变化的一致性
    content.classList.remove("mobile", "tablet", "desktop");
    content.classList.add(targetView);
  });
});

// 开始监听.content元素
resizeObserver.observe(content);

// 页面加载时初始化视图
setView("desktop");

关键细节说明 #

• ResizeObserver是现代浏览器原生支持的API，专门用于监听元素尺寸变化，比监听窗口resize事件更精准，能直接获取目标元素的实际宽度。
• 用CSS类管理样式，遵循样式与逻辑分离的原则，比直接操作style属性更易维护和扩展。
• 可以根据需求自由调整宽度阈值（如768px、1200px），以及对应元素的显隐逻辑（比如汉堡按钮在移动端显示，其他尺寸隐藏）。
• 如果需要兼容旧浏览器，可以引入ResizeObserver的polyfill（但目前主流浏览器均已支持）。

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