2

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

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

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

  1. 事件的存在onMediaChange，例如：

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

  2. link可以使用标签附加脚本，例如：

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

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

4

1 回答 1

1

我认为您正在寻找window.matchMediaAPI：

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

基本上，它可以让您将事件侦听器附加到媒体查询。append()您可以将此与添加/删除动态<link>标签的方法配对。

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

于 2013-05-09T16:56:57.843 回答