Javascript 如何对网页中的样式更改作出反应？

假设我们有一个响应式设计的网页，它使用媒体查询实现三种不同的视图：屏幕、手持和打印。让我们进一步假设，这样一个网页包含几个基于JS的、依赖于视图的布局修复、导航逻辑、内容生成宏和类似的东西，其原因可能或多或少有争议

现在，请想象一下，用户正在通过调整浏览器窗口的大小并打印其内容来玩弄我们的设计。A我们希望对样式更改做出反应（由浏览器执行），以便重新计算布局修复、重新生成动态内容、重新安排导航或其他任何操作。但是我们的脚本不需要处理“onMediaChange”事件，是吗？那么，Web开发人员如何将媒体驱动风格与媒体独立逻辑同步呢

多年来，人们在StackOverlow上以多种形式和开发环境提出了这个问题，但至今还没有给出有益的答案。有些变通方法使用基于宽度的条件，但这些条件既不能处理打印视图，也不能对页面加载后发生的宽度更改作出反应。另一组CSS嗅探解决方案是基于轮询的，这是容易出错和不雅的。我想要的是一个通用、优雅、符合标准的客户端解决方案，用于将JS和CSS与媒体更改同步。两种不存在的理想解决方案可以是：

存在

onMediaChange

事件，例如：

document.addEventListener('onMediaChange', myHandler, false);

使用

链接

标记附加脚本的可能性，例如：

<link rel="script" media="print" type="text/javascript" href="print.js"/>

---

我将非常感谢任何现有的解决方案、创造性建议、理论评论，甚至超出此问题范围的哲学讨论。

我想您正在寻找

窗口。matchMedia

API:

基本上，它允许您将事件侦听器附加到媒体查询。您可以将其与

append（）

方法配对，以添加/删除动态

标记

---

不幸的是，据我所知，旧浏览器对它的支持很差，但使用polyfill（如）可能会获得全局、跨浏览器的支持。

如果您认为调整大小是唯一会触发响应式设计的因素，那么，为什么不附加一个

调整大小

事件侦听器呢？窗口调整大小只是一个例子。我正在寻找一个通用的解决方案，它将JS和CSS与媒体查询机制同步（或者是一个很好的临时解决方案）。例如，我想调用JS函数来重新格式化文档以便打印。可能是这样的：