document.write结合媒体查询无法实现响应式样式切换的问题及替代方案咨询

嘿，你遇到的这个问题核心在于document.write()的工作方式！当页面加载完成之后调用document.write()，它会直接清空整个当前文档，重新开始写入内容——这就意味着每次窗口尺寸变化触发change事件时，你的页面会被完全重置，原来的DOM结构、事件监听全都会被销毁。看起来像是样式切换没生效，实际上是页面已经被清空重建了，自然没法实时响应，必须刷新才能恢复正常的页面结构。

而document.body.style.backgroundColor能正常工作，是因为它只是修改现有DOM元素的样式属性，完全不会破坏页面的整体结构和已有的事件监听，所以窗口一变化就能立刻看到效果。

下面给你几个从简单到灵活的方案，按需选择：

方案1：直接用CSS媒体查询（最推荐，零JS） #

这是响应式设计的标准玩法，完全不需要写JS，性能更好也更简洁。把两个样式表的内容整合到一个CSS文件里，用媒体查询分隔就行：

/* 大屏幕（>700px）的默认样式 */
body {
  background-color: blue;
}
/* 这里放variant2.css里的所有样式 */

/* 当窗口宽度≤700px时触发的样式 */
@media (max-width: 700px) {
  body {
    background-color: yellow;
  }
  /* 这里放variant1.css里的所有样式 */
}

浏览器会自动根据窗口尺寸切换对应的样式，省心又靠谱。

方案2：动态修改现有link标签的href（适合必须分开样式表的场景） #

先在HTML里提前放一个带ID的link标签：

<link id="responsive-style" href="./src/css/variant2.css" type="text/css" rel="stylesheet">

然后修改你的JS代码，不用document.write，直接修改这个link的href属性就行：

const Swidth = window.matchMedia("(max-width: 700px)");
const styleLink = document.getElementById('responsive-style');

function reSize(Swidth) {
  styleLink.href = Swidth.matches ? "./src/css/variant1.css" : "./src/css/variant2.css";
}

// 页面加载完成先执行一次，初始化样式
reSize(Swidth);
// 监听窗口尺寸变化
Swidth.addEventListener("change", reSize);

这样每次切换只是替换样式表的URL，完全不会破坏页面结构，实时响应毫无问题。

方案3：动态创建/移除link元素（适合按需加载的场景） #

如果不想提前引入link标签，可以动态创建并管理样式表元素：

const Swidth = window.matchMedia("(max-width: 700px)");
let currentStyleLink = null;

function reSize(Swidth) {
  // 先移除之前的样式表，避免样式冲突
  if (currentStyleLink) {
    document.head.removeChild(currentStyleLink);
  }

  // 创建新的link元素
  currentStyleLink = document.createElement('link');
  currentStyleLink.type = 'text/css';
  currentStyleLink.rel = 'stylesheet';
  currentStyleLink.href = Swidth.matches ? "./src/css/variant1.css" : "./src/css/variant2.css";
  
  // 添加到页面头部
  document.head.appendChild(currentStyleLink);
}

// 初始化样式
reSize(Swidth);
// 监听尺寸变化
Swidth.addEventListener("change", reSize);

这个方案会在每次切换时清理旧的样式表，加载新的，能有效避免不同样式表之间的冲突。

优先选CSS媒体查询，这是响应式设计的最佳实践；如果必须用JS切换样式表，就用修改现有link的href或者动态创建/移除link的方式——绝对别在页面加载完成后用document.write()操作DOM，它的设计初衷是在页面加载过程中写入内容，加载完成后用它只会搞砸你的页面结构。

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