Question

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

现在，请想象用户正在通过调整浏览器窗口大小并打印其内容来玩我们的设计。我们想对样式更改（由浏览器执行）做出反应，以便重新计算布局修复，重新生成动态内容，重新排列导航或其他任何内容。但是我们的脚本没有“onMediaChange”事件，是吗？那么，Web开发人员以何种方式将媒体驱动的风格与媒体无关的逻辑同步？

这个问题，在几种形式和发展背景下，已经在StackOverlow上被问了多年，但还没有给出有益的回答。有使用基于宽度的条件的解决方法，但这些都不处理打印视图，也不会对页面加载后发生的宽度更改做出反应。其他一组CSS嗅探解决方案基于轮询，这是一种易错且不优雅的轮询。我正在寻找的是一个通用，优雅，符合标准的客户端解决方案，用于将JS和CSS与媒体更改同步。两个不存在的，理想的解决方案可能是：

存在onMediaChange事件，例如：

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

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

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

对于任何现有的解决方案，创意建议，理论评论甚至是超出这个问题范围的哲学讨论，我将不胜感激。

Answer 1

我认为您正在寻找window.matchMedia API：

https://developer.mozilla.org/en-US/docs/DOM/window.matchMedia

基本上，它允许您将事件侦听器附加到媒体查询。您可以将其与append()方法配对，以添加/删除dinamically <link>标记。

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

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

1 个答案: