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

让我们假设我们有一个响应式设计的网页，它使用媒体查询来实现三种不同的视图：屏幕，手持和打印。让我们进一步假设，这样一个网页包括几个基于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"/>

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

来源

2013-04-28 Krzysztof Abramowicz

如果您认为调整大小是唯一会触发您的响应式设计的问题，那么为什么不附加'resize'事件侦听器？ – MaxArt 2013-04-28 15:48:37

窗口大小调整仅仅是一个例子。我正在寻找一个通用的解决方案，它将JS和CSS与媒体查询机制同步（或者是一个很好的方法）。例如，我想调用一个JS函数来重新格式化文档以进行打印。 – 2013-04-28 16:10:17

也许这样：http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/ – bfavaretto 2013-04-28 18:20:47

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

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

基本上，它会告诉你附加一个事件侦听器，媒体查询。您可以将其与append()方法配对以添加/删除dinamically <link>标签。

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

来源

2013-05-09 16:56:57 skz

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

回答

相关问题