将 javascript 与媒体查询集成的最可靠方法是什么？

Question

我正在使用 Twitter Bootstrap 构建一个响应式网站。我可以使用媒体查询和每个断点的不同 CSS 显示/隐藏/修改/重新排列内容。这很好用。但是为每个断点触发不同的 javascript 呢？最可靠的方法是什么？

在这种特殊情况下，我使用的是 masonry 插件。我希望砖石在小型、中型或大型设备上布置项目，但在超小型设备上我不希望它这样做。 （我自己的原生列表布局就可以了）。

• 似乎最现代的方法是使用window.matchMedia() 方法。这也让我可以添加一个侦听器，以便在窗口大小发生变化时添加/移除砌体。缺点是，根据 Mozilla Developer Network 的说法，对 matchMedia 的支持不是很好。我可以使用 polyfill 来解决这个问题，但听起来有点复杂。

• 另一种方法是测试document.documentElement.clientWidth（或.screenWidth），并将我的javascript逻辑与媒体查询的断点同步。我会根据需要使用window.onresize 事件来加载/卸载/重新布局。

• 第三种方法可能是在 resize 事件上运行一些 javascript，测试由 css 和媒体查询控制的属性的值。例如，如果某个特定元素隐藏在超小屏幕上，我可以查看该元素的可见性属性以确定我何时在超小屏幕上。

我倾向于这三个选项中的第二个，但我很想知道是否有一种“普遍接受”的方法来实现这一点，以及是否还有其他我错过的选项。

Answer 1

我会选择 window.matchMedia，因为大多数当前的浏览器 (http://caniuse.com/#feat=matchmedia) 都支持它，对于那些不支持它的浏览器，你可以使用这个 polyfill：https://github.com/paulirish/matchMedia.js

使用 ma​​tchMedia 可能会降低特定视口/调整大小逻辑的复杂性，因为您可以重用已在 css 中使用的断点定义。如果您使用的是 SASS，您甚至可以定义一次断点并在您的 SASS 和 JavaScript 之间共享它们：http://viget.com/extend/sharing-data-between-sass-and-javascript-with-json

如果您不进行节流/去抖动，监听 resize-event 可能会变得非常昂贵/缓慢。如果您坚持调整大小事件，请查看https://github.com/louisremi/jquery-smartresize。

有一个 jsPerf 将 matchMedia 的性能与调整大小事件进行比较：https://jsperf.com/matchmedia-vs-resize/3 对我来说，matchMedia 比调整大小快得多（在 Chrome 41 和 Firefox 36 中测试）

Answer 2

查看 JavaScript 中的出色媒体查询：enquire.js 是一个轻量级的纯 JavaScript 库（无依赖项），用于以编程方式响应媒体查询。

http://wicky.nillia.ms/enquire.js/

https://github.com/WickyNilliams/enquire.js/